CODEWITHSUNDEEP
asp.netjquery
Srinivas
Srinivas

Reputation: 35

How to get Gridview row values using Jquery

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>

Upvotes: 2

Views: 19218

Answers (2)

JanivZ
JanivZ

Reputation: 2325

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/>
  1. In that function use jquery to iterate all the table cells and retirieve their values.
  2. Map the values to a json object or somthing similar.
  3. 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.

Upvotes: 1

Fraz Sundal
Fraz Sundal

Reputation: 10448

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.

Upvotes: 5

Related Questions