Databases
StackOverflow2013
Postsdbo
POHow do I access selected column value in a GridView using Jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I access selected column value in a GridView using Jquery
    text
    copied!<p>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.</p> <pre><code>&lt;asp:GridView ID="GV_CDFDeviceList" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False"&gt; &lt;RowStyle BackColor="#EFF3FB" /&gt; &lt;Columns&gt; &lt;asp:TemplateField HeaderText="Select"&gt; &lt;ItemTemplate&gt; &lt;asp:CheckBox ID="chkSelect" runat="server" /&gt; &lt;/ItemTemplate&gt; &lt;/asp:TemplateField&gt; &lt;/Columns&gt; &lt;/asp:GridView&gt; </code></pre> <p>Once the GridView is populated from server-side, the rendered grid looks something like this:</p> <pre><code>Select ColumnSomeId ColumnX ColumnY ColumnZ [checkbox] 123 xxx1 yyy1 zzz1 [checkbox] 122 xxx2 yyy2 zzz2 [checkbox] 124 xxx3 yyy3 zzz3 </code></pre> <p>The HTML which get generated for this is shown below:</p> <pre><code>&lt;table cellspacing="0" cellpadding="4" border="0" id="ctl00_content_GV_CDFDeviceList" style="color:#333333;border-collapse:collapse;"&gt; &lt;tr style="color:White;background-color:#507CD1;font-weight:bold;"&gt; &lt;th scope="col"&gt;Select&lt;/th&gt;&lt;th scope="col"&gt;SomeId&lt;/th&gt;&lt;th scope="col"&gt;ColumnX&lt;/th&gt;&lt;th scope="col"&gt;ColumnY&lt;/th&gt;&lt;th scope="col"&gt;ColumnZ&lt;/th&gt; &lt;/tr&gt;&lt;tr style="background-color:#EFF3FB;"&gt; &lt;td&gt; &lt;input id="ctl00_content_GV_CDFDeviceList_ctl02_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl02$chkSelect" /&gt; &lt;/td&gt;&lt;td&gt;123&lt;/td&gt;&lt;td&gt;xxx1&lt;/td&gt;&lt;td&gt;yyy1&lt;/td&gt;&lt;td&gt;zzz1&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#EFF3F1;"&gt; &lt;td&gt; &lt;input id="ctl00_content_GV_CDFDeviceList_ctl03_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl03$chkSelect" /&gt; &lt;/td&gt;&lt;td&gt;122&lt;/td&gt;&lt;td&gt;xxx2&lt;/td&gt;&lt;td&gt;yyy2&lt;/td&gt;&lt;td&gt;zzz3&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#EFF3FB;"&gt; &lt;td&gt; &lt;input id="ctl00_content_GV_CDFDeviceList_ctl04_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl04$chkSelect" /&gt; &lt;/td&gt;&lt;td&gt;124&lt;/td&gt;&lt;td&gt;xxx3&lt;/td&gt;&lt;td&gt;yyy3&lt;/td&gt;&lt;td&gt;zzz3&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>The user may select any of the rows using the checkbox, and will click a button for further processing.</p> <p>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.</p> <p>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.</p> <p>See the code snippet of how I did it:</p> <pre><code>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) + "}"; </code></pre> <p>Now you see this particular part:</p> <pre><code>siteIds[index] = this.parentElement.nextSibling.innerHTML; </code></pre> <p>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.</p> <p>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.</p> <p>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</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload