How do I access selected column value in a GridView using Jquery

Question

I am comparatively new to the whole jQuery thing - hence this doubt. Let me first apologize for the long post - had to do it to make the context clear. I have a GridView control defined in my aspx page which has a few columns, and the first column is a checkbox where the user can select a row. I have put down the defined GridView template code below.

<asp:GridView ID="GV_CDFDeviceList" runat="server" CellPadding="4" ForeColor="#333333"
                GridLines="None" AutoGenerateColumns="False">
                <RowStyle BackColor="#EFF3FB" />
                <Columns>
                    <asp:TemplateField HeaderText="Select">
                        <ItemTemplate>
                            <asp:CheckBox ID="chkSelect" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>                    
</asp:GridView>

Once the GridView is populated from server-side, the rendered grid looks something like this:

Select      ColumnSomeId        ColumnX     ColumnY     ColumnZ
[checkbox]        123             xxx1        yyy1        zzz1
[checkbox]        122             xxx2        yyy2        zzz2
[checkbox]        124             xxx3        yyy3        zzz3

The HTML which get generated for this is shown below:

<table cellspacing="0" cellpadding="4" border="0" id="ctl00_content_GV_CDFDeviceList"   style="color:#333333;border-collapse:collapse;">
    <tr style="color:White;background-color:#507CD1;font-weight:bold;">
        <th scope="col">Select</th><th scope="col">SomeId</th><th scope="col">ColumnX</th><th scope="col">ColumnY</th><th scope="col">ColumnZ</th>
    </tr><tr style="background-color:#EFF3FB;">
        <td>
                            <input id="ctl00_content_GV_CDFDeviceList_ctl02_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl02$chkSelect" />
                        </td><td>123</td><td>xxx1</td><td>yyy1</td><td>zzz1</td>
    </tr>

    <tr style="background-color:#EFF3F1;">
        <td>
                            <input id="ctl00_content_GV_CDFDeviceList_ctl03_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl03$chkSelect" />
                        </td><td>122</td><td>xxx2</td><td>yyy2</td><td>zzz3</td>
    </tr>

    <tr style="background-color:#EFF3FB;">
        <td>
                            <input id="ctl00_content_GV_CDFDeviceList_ctl04_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl04$chkSelect" />
                        </td><td>124</td><td>xxx3</td><td>yyy3</td><td>zzz3</td>
    </tr>
</table>

The user may select any of the rows using the checkbox, and will click a button for further processing.

In the client-side, I want to build a json object with only the selected rows id column values, and then send this json string to the server using jQuery Ajax method.

I have made all this working, it does work fine. But I do have a doubt as to whether I am doing it the right way. The doubt I am having is in the jQuery code that does the selection of all selected rows.

See the code snippet of how I did it:

var isAnyDeviceSelected = AreAnyDevicesSelected();

            if (isAnyDeviceSelected) {

                var siteIds = new Array();
                $(":checked").each(function(index) {
                    siteIds[index] = this.parentElement.nextSibling.innerHTML;//Retrieve Ids for the selected row.

                });

                var jsonSiteIdList = "{ siteIdList: " + JSON.stringify(siteIds) + "}";

Now you see this particular part:

siteIds[index] = this.parentElement.nextSibling.innerHTML;

I am not very happy with this. As you can see, I get to the checkbox node, then go to the parent element (which is the td element), then navigate to the next sibling of it, whose innerHTML is the id which I am looking for.

Finally, I get a list of all selected ids in the array, though I am not sure if I am doing it the right way. Need a code review from the jQuery/Javascript experts over there, and do let me know if there is a better way of doing this using jQuery.

EDIT: The id selection jQuery code is written based on the table structure rendered by the Gridview. So as long as the GridView HTML render logic strictly follows d same pattern of table-->tr--> td structure, this jQuery will never fail. The solution I am looking for is beyond this (I am not sure if I am going a lil far-fetched). Is it possible that the gridView will render the td for the siteid with an id of its own, so that my jQuery code is based on the td id and safe forever? EDIT end Thanks

Jasper · Accepted Answer · 2012-02-05 11:14:50Z

1

Well you can use jQuery for your selection which would look pretty similar: siteIds[index] = $(this).parent().next().text();.

You can also speed-up your loop by using a for loop (here is a jsperf to show the performance improvement: http://jsperf.com/jquery-each-vs-for-loops/2):

var siteIds  = [],
    $checked = $(':checked');

for (var i = 0, len = $checked.length; i < len; i++) {
    siteIds[siteIds.length] = $checked.eq(i).parent().next().text();
}

Notice I'm using .text() which gets just the text in an element and will not return any HTML elements. You can use .html() if you want to return descendant HTML elements as well.

Also I used siteIds[siteIds.length] to increment the index of the output array which runs faster in older browsers than using .push() but .push() is faster in newer browsers: siteIds.push($checked.eq(i).parent().next().text());

Here are some docs for ya:

.parent(): http://api.jquery.com/parent
.next(): http://api.jquery.com/next

answered Feb 5, 2012 at 11:14

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abey Over a year ago

Thanks Jasper for the answer, especially the tips on the performance aspect of it.

Abey Over a year ago

The answer is almost similar to mine, in which the id selection code is written based on the table structure rendered by the Gridview. So as long as the GridView HTML render logic strictly follows d same pattern of table-->tr--> td structure, this jQuery will never fail. But the solution I ws looking for ws beyond this (I am not sure if I am going a lil far-fetched). Is it possible that the gridView will render the td for the siteid with an id of its own, so that my jQuery code is based on the td id and safe forever?

Jasper Over a year ago

Sorry, I don't have much experience with asp.net. If you can add a class to the TD element that contains the ID then selecting it in jQuery could look like this: $(this).closest('tr').find('.id-col').text() (or using the faster method: $checked.eq(i).closest('tr').find('.id-col').text();). This is more flexible but still relies on having an ancestor TR element.

Collectives™ on Stack Overflow

How do I access selected column value in a GridView using Jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related