get the value of certain row of the grid from within client?

[t4nu]

Hi,
I want to get the value of certain cell of the grid from within the client, is it the same with when I tried to get the cell from within the server side script? If so why I always got blank (null) value? If it is different then is there any example in doing so?
Thanks in advance for the help.

[Jon]

No it's not the same: the server might not be up to date with changes made in the client, plus the server has the notion of "current row" but this is only set when the user clicks on something which results in a server side event. The client has no such "current row" concept.

You can get the value of a table column in the client when something else on the same row is clicked with something like this:

Code: Select all

var x= $(this).closest("tr").find(".xxxx").text(); 

..where xxxx is the class assigned to the column in HTML Element Properties. This uses jQuery to find the parent row then searches for the column using its class name. Use the text() method if the column is display only, use val() if it's an input field.

If you want to get a table column from any other context (other than from a click on the same row), it's a bit harder. You need to assign a unique class name to each cell on the server, e.g. using the columnDataClass property, and then search for this on the client. I don't have an example of doing this I'm afraid.

[t4nu]

Hi Jon,
I have tried this:
1. Put the class name (AdvanceNo) on the 1st column in
the tab Editor Input
2. Put the class name on the 2nd column in the tab Editor Input
3. Put the code in the event handlers of the 2nd column in the jQuery tab.
The code put in the click event and is looking like this:

Code: Select all

    var x = $(this).parent("tr").find(".AdvanceNo").text();

    alert(x);

    return false;
    

but it always give blank result.

What should I check to resolve that problem?
Thanks in advance for the help.

No it's not the same: the server might not be up to date with changes made in the client, plus the server has the notion of "current row" but this is only set when the user clicks on something which results in a server side event. The client has no such "current row" concept.

You can get the value of a table column in the client when something else on the same row is clicked with something like this:

Code: Select all

var x= $(this).parent("tr").find(".xxxx").text(); 

..where xxxx is the class assigned to the column in HTML Element Properties. This uses jQuery to find the parent row then searches for the column using its class name. Use the text() method if the column is display only, use val() if it's an input field.

If you want to get a table column from any other context (other than from a click on the same row), it's a bit harder. You need to assign a unique class name to each cell on the server, e.g. using the columnDataClass property, and then search for this on the client. I don't have an example of doing this I'm afraid.

[Jon]

Try closest() instead of parent() - I think parent() only searches up one level in the HTML structure whereas closest() carries on searching. If this doesn't work, I suggest looking closely at the generated HTML to check its structure. Then put a breakpoint on the line of JS code and use a debugger to evaluate each part of the statement in turn till you find the one that fails i.e.

$(this)
then..
$(this).parent("tr")
then..
$(this).parent("tr").find(".AdvanceNo")

I use firebug to do this, but any debugger should be capable.

[t4nu]

Thanks a lot, Jon. It solved my problem.

Try closest() instead of parent() - I think parent() only searches up one level in the HTML structure whereas closest() carries on searching. If this doesn't work, I suggest looking closely at the generated HTML to check its structure. Then put a breakpoint on the line of JS code and use a debugger to evaluate each part of the statement in turn till you find the one that fails i.e.

$(this)
then..
$(this).parent("tr")
then..
$(this).parent("tr").find(".AdvanceNo")

I use firebug to do this, but any debugger should be capable.

[Jon]

parent() changed to closest() in the original response.

[Segi]

Just a tip since I do this a lot.

If you add a click event in HTML entities with a single line of code (I usually add a single alert message like alert("test")) you can load up your page in a browser and press F12 to open the developer console.

In Google Chrome you go to Sources. In Firefox, you go to Debugger. The script that you have to debug is called jQueryEventRegistration. Find the alert line and add a breakpoint by clicking on the line number.

When the click event is triggered, it'll stop at the alert message which gives you the opportunity to use the console to get the value. I like doing it this way because you can enter this command in real time and get an immediate result until you find the right string to traverse the DOM to get the value that you need from the table.

[t4nu]

Thank you very much for the tip.

Just a tip since I do this a lot.

If you add a click event in HTML entities with a single line of code (I usually add a single alert message like alert("test")) you can load up your page in a browser and press F12 to open the developer console.

In Google Chrome you go to Sources. In Firefox, you go to Debugger. The script that you have to debug is called jQueryEventRegistration. Find the alert line and add a breakpoint by clicking on the line number.

When the click event is triggered, it'll stop at the alert message which gives you the opportunity to use the console to get the value. I like doing it this way because you can enter this command in real time and get an immediate result until you find the right string to traverse the DOM to get the value that you need from the table.