How to get Gridview row values using Jquery

Question

when we click on Update Button I need to get

Date, Client Name, Number of Hours, Rate, Form Date, To Date, VAT, Service tax, Total amount Details..

Using "Jquery"

Please kindly help me....

I am very thankful to you....

    <asp:GridView ID="gvTransactions" CssClass="gridStyle" runat="server" AutoGenerateColumns="false" 
DataKeyNames="fn_transaction_pk"
OnRowDataBound="gvTransactions_RowDataBound"
OnRowDeleting="gvTransactions_RowDeleting"
OnRowEditing="gvTransactions_RowEditing"
OnRowCancelingEdit="gvTransactions_RowCancelingEdit" >
<Columns>
<asp:TemplateField HeaderText="Invoice Details" ItemStyle-Width="90%" >
<ItemTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:HiddenField ID="fn_transaction_pk" runat="server" value='<% #Eval("FN_TRANSACTION_PK")%>' />
<asp:Label ID="lblDate" runat="server" Text="Date : " CssClass="gridLabel1Style" />
</td>
<td><asp:Label ID="ltDate" runat="server" Text='<% #Eval("transaction_date","{0:MM/dd/yyyy}")%>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblClientName" runat="server" Text="Client Name : " CssClass="gridLabel1Style"/></td>
<td><asp:Label ID="ltClientName" runat="server" Text='<% #Eval("CLIENT_NAME") %>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblNoOfHours" runat="server" Text="Number of Hours : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltNoOfHours" runat="server" Text='<% #Eval("NO_OF_HOURS") %>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblRate" runat="server" Text="Rate : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltRate" runat="server" Text='<% #Eval("RATE", "{0:0.00}") %>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblFromD" runat="server" Text="From Date : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltFrom" runat="server" Text='<% #Eval("FROM_DATE","{0:MM/dd/yyyy}") %>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblToD" runat="server" Text="To Date : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltTo" runat="server" Text='<% #Eval("TO_DATE","{0:MM/dd/yyyy}") %>' CssClass="gridLadel2Style" /></td> 
</tr>
<tr>
<td><asp:Label ID="lblVAT" runat="server" Text="Value Added Tax(VAT) : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltVat" runat="server" Text='<% #Eval("VAT", "{0:0.00}") %>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblServiceTax" runat="server" Text="Service Tax : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltServiceTax" runat="server" Text='<% #Eval("SERVICE_TAX", "{0:0.00}") %>' CssClass="gridLadel2Style" /></td>
</tr>
<tr>
<td><asp:Label ID="lblAmount" runat="server" Text="Total Amount : " CssClass="gridLabel1Style" /></td>
<td><asp:Label ID="ltAmount" runat="server" Text='<% #Eval("TOTAL_AMOUNT", "{0:0.00}") %>' CssClass="gridLadel2Style" /></td>
</tr>
</table> 
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtInvDate" runat="server" CssClass="tcal csssmalltextbox" ToolTip="MM/DD/YYYY" />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Actions" ItemStyle-CssClass="gridColumnStyle2">
<ItemTemplate>

<asp:Button ID="updateBtn" runat="server" CommandName="select" Text="Update" onclientclick="pageLoad()" />


</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="btnupdate" runat="server" CommandName="Update" Text="Update" Width="70px" CssClass="updateBtn" />

</EditItemTemplate>
</asp:TemplateField> 
</Columns>
</asp:GridView>

Fraz Sundal · Accepted Answer · 2013-01-24 11:51:43Z

5

Just add a class name on Update button having ID updateBtn and then try this code

<script type="text/javascript">
        $(document).ready(function () {
            $(".updateBtn").click(function (e) {

                var Client = $(this).closest('tr').find("span[id*=lblClientName]").text();
                var Date = $(this).closest('tr').find("span[id*=ltDate]").text();
                alert(Client);
                e.preventDefault();
            });
        });
    </script>

Let me know if you need any further explanation.

answered Jan 24, 2013 at 11:51

Fraz Sundal

10.4k22 gold badges87 silver badges133 bronze badges

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

1 Comment

Fraz Sundal Over a year ago

We are here to help each other

Jignesh.Raj · Accepted Answer · 2013-12-18 06:17:48Z

1

Basically what i would do is:<br/> 1. add in the asp:LinkButton template an onlclick handler to call a Javascript function with the

 <% #Eval("FN_TRANSACTION_PK")%>' /> as a parameter.<br/>

In that function use jquery to iterate all the table cells and retirieve their values.
Map the values to a json object or somthing similar.
send that to the server.<br/>

This should be enough to get you going, I'm sorry - i know some code would help but i dont have time atm to write it up.<br/> If you have any questions let me know.

edited Dec 18, 2013 at 6:17

Jignesh.Raj

6,0074 gold badges30 silver badges57 bronze badges

answered Jan 24, 2013 at 11:12

JanivZ

2,3253 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to get Gridview row values using Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related