CODEWITHSUNDEEP
jqueryasp.netgridview
user1135218
user1135218

Reputation: 403

asp.net get gridview values with jquery and put on textboxes

I have a gridview with several columns hidden. When I mouse over each row on the grid, I want the hidden column values to be shown on textboxes, below the gridview.

Following is the html/aspx code (shortened) Only a few columns are visible, most are hidden.

     <asp:GridView ID="GridView1" >
           <rowstyle cssclass="GridRowStyle" />
           <Columns>                                  
              <asp:BoundField DataField="ClientsName"  HeaderText="ClientsName"></asp:BoundField>

             <asp:BoundField DataField="Clientsaddress1"  HeaderText="Clientsaddress1"><ItemStyle CssClass="hiddencol" /><HeaderStyle CssClass="hiddencol" /> </asp:BoundField>
              <asp:BoundField DataField="Clientsaddress2"  HeaderText="Clientsaddress3"><ItemStyle CssClass="hiddencol" /><HeaderStyle CssClass="hiddencol" /> </asp:BoundField>
    </columns>
    </asp:gridview>

<asp:TextBox ID="txtAddress1" runat="server" Width="250px"  ></asp:TextBox>
<asp:TextBox ID="txtAddress2" runat="server" Width="250px"  ></asp:TextBox>

Following is some of the Jquery code I am using to get the gridview row I've selected, but I can't get it to give me the value of each hidden column on the gridview row. I've tried several pieces of code found in stackoverflow, but can't get it to work. The code gives me the row number I am on, great, but can't get the hidden column values and put them in their respective textboxes below the gridview.

 $("#GridView1 tr td").mouseenter(function () {
                    var iColIndex = $(this).closest("tr td").prevAll("tr td").length;
                    var iRowIndex = $(this).closest("tr").prevAll("tr").length;
                    alert(iRowIndex)
                 });

Your guidance is appreciated.

UPDATE: here is a sample of what gets rendered in HTML. The page has some 600 lines of text so I have shorten to show just an example of what the gridview rendering looks like.

<tr title="Click to select this row." class="GridRowStyle" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">

<td class="hiddencol">23644</td>
<td class="hiddencol">10102</td>
<td class="hiddencol">Y</td>
<td class="hiddencol">21 Jump Street</td>
<td class="hiddencol">Sydney, Australia</td>
<td class="hiddencol">&nbsp;</td>
<td>

<table>
<tr>
<td class="STD_normal" style="width:150px; font-weight:bold">Apple Inc.</td>                                                       
</tr>
<tr>
<td class="STD_Normal_Grey" style="width:150px">Entered: 31-Jan-2015 </td>
</tr>
</table>                                              
</td><td>
<tr title="Click to select this row." class="GridRowStyle" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">
<td class="hiddencol">23644</td>
<td class="hiddencol">10102</td>
<td class="hiddencol">Y</td>
<td class="hiddencol">21 Jump Street</td>
<td class="hiddencol">Sydney, Australia</td>
<td class="hiddencol">&nbsp;</td>
<td>

<table>
<tr>
<td class="STD_normal" style="width:150px; font-weight:bold">Apple Inc.</td>                                                       
</tr>
<tr>
<td class="STD_Normal_Grey" style="width:150px">Entered: 31-Jan-2015 </td>
</tr>
</table>                                              
</td><td>

Upvotes: 1

Views: 6659

Answers (2)

Frebin Francis
Frebin Francis

Reputation: 1915

Html Code

Specified class for each hidden field. "data1 and data2" so we can directly get element using that class.

<asp:GridView ID="GridView1" runat="server" CssClass="tableGrid">
            <RowStyle CssClass="GridRowStyle" />
            <Columns>
                <asp:BoundField DataField="ClientsName" HeaderText="ClientsName"></asp:BoundField>
                <asp:BoundField DataField="Clientsaddress1" HeaderText="Clientsaddress1">
                    <ItemStyle CssClass="hiddencol data1" />
                    <HeaderStyle CssClass="hiddencol" />
                </asp:BoundField>
                <asp:BoundField DataField="Clientsaddress2" HeaderText="Clientsaddress3">
                    <ItemStyle CssClass="hiddencol data2" />
                    <HeaderStyle CssClass="hiddencol" />
                </asp:BoundField>
            </Columns>
        </asp:GridView>

        <asp:TextBox ID="TextBox1" runat="server" CssClass="text1" Width="250px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="text2" Width="250px"></asp:TextBox>

Script

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table.tableGrid tr").mouseover(function (event) {
                var row = $(this);
                $(".text1").val($(row).find("td.data1").text());
                $(".text2").val($(row).find("td.data2").text());
            });
        });
    </script>

CSS

.hiddencol {
            display: none;
        }

Hope this helps

Upvotes: 3

Shirish
Shirish

Reputation: 1250

On mouse hover event call client function like below and map that control with other values of row which value u want from gridview to textbox

   function IAmSelected(source, eventArgs) {
                if (source) {
                    // Get the HiddenField ID.
                    var hiddenfieldID = source.get_id().replace("chkAdd", "hfValue");// here you can add any control of your gridview row which value you want
                    $get(hiddenfieldID).value = eventArgs.get_value();//check value or alert
                    document.getElementById('<%= yrtextbox.ClientID %>').value = eventArgs.get_value(); //for textbox
                }
      }

Upvotes: 0

Related Questions