jQuery to loop through ASP.NET gridview asp.net

Question

suppose i have gridview in my aspx page and gridivew has many rows and 3 columns. column are

select - checkbox, first name - textbox ,last name - textbox etc

i want to loop through gridview by jquery and read those textbox value from that row where check box is selected.

gridview look like

<asp:GridView
    id="GridView1"
    DataSourceID="srcMovies"
    DataKeyNames="Id"
    Runat="server" AutoGenerateColumns="false">

<asp:TemplateField>
    <ItemTemplate>
    <asp:Label ID="lblslno" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
    <asp:TextBox ID="txtFName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
    <asp:TextBox ID="txtLName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

i got jquery code to read textbox value from each row if checkbox is selected...here is code

 <script type="text/javascript">
 $(document).ready(function () {
     var sum = 0;
     $('#btn1').click(function () {
         $('#tr').each(function () {
             if ($(this).find('input:checkbox').attr("checked"))
                 sum += parseInt($(this).find('input:text').attr("value"));
         });
         window.alert(sum.toString());
     });
 });
</script>

my concern is how to read data from txtFName & txtLName textboxes and label lblslno on each row. can anyone drive toward right code. thanks

i got a good solution....here it is

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    var jsonData = new Array();
    $(".getJSON").click(function() {
        $.map($("table[id*=gvPurchaseOrderDetails] tr"), function(item, index) {
            if ($(item).find("input[type=text]").length>0) {
                jsonData[index] = new Object();
                jsonData[index].employeeid = $(item).find("input[type=text][id*=employeeid]").val();
                jsonData[index].employeename = $(item).find("input[type=text][id*=employeename]").val();
                jsonData[index].sex = $(item).find("select[id*=sex]").val();
                jsonData[index].graduate = $(item).find("input[type=checkbox][id*=graduate]").attr("checked");
            }
        });

        var jsonStringData = JSON.stringify(jsonData);
    });
});

<asp:GridView ID="gvPurchaseOrderDetails" runat="server"
    AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="employeeid">
            <ItemTemplate>
                <asp:TextBox ID="employeeid" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="employeename">
            <ItemTemplate>
                <asp:TextBox ID="employeename" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
       <asp:TemplateField HeaderText="sex">
            <ItemTemplate>
                <asp:DropDownList ID="sex" runat="server" ><asp:ListItem>Male</asp:ListItem><asp:ListItem>Female</asp:ListItem></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Is Graduate">
            <ItemTemplate>
                <asp:CheckBox ID="graduate" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<a class="getJSON" href="#">get json data</a>

CAbbott · Accepted Answer · 2012-06-06 13:59:35Z

1

GridView is going to mangle the Ids of the textboxes. The easiest way would be to add a css class to the text boxes and then use that to find them:

<asp:TemplateField>
    <ItemTemplate>
        <asp:TextBox ID="txtFName" CssClass="FName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
        <asp:TextBox ID="txtLName" CssClass="LName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

EDIT: As suggested in the comments, they could then be found using the class selector:

$(this).find('.LName').val()

edited Jun 6, 2012 at 13:59

answered Jun 6, 2012 at 13:53

CAbbott

8,1184 gold badges33 silver badges39 bronze badges

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

11 Comments

Terry Over a year ago

This is the correct way to do it. ID attributes need to be unique for each page so the GridView will append sequential numbers to them. You should just add CssClass="LName", CssClass="FName", etc.

Terry Over a year ago

And your selector could be $(this).find('.LName').val()

CAbbott Over a year ago

@Terry - I modified the CssClasses in my example to match your comment.

Thomas Over a year ago

can't we loop through like this - $("#calculate").click(function() { var result = 0; $("input:checkbox:checked[name$=check]").each(function() { result += Math.round($(this).parents("tr").find("input:text[name$=amount]").val(), 4); }); alert(result); });

Thomas Over a year ago

var number_of_rows = $("#<%=GridView1.ClientID %> tr").size()

|

Collectives™ on Stack Overflow

jQuery to loop through ASP.NET gridview asp.net

gridview look like

i got a good solution....here it is

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

gridview look like

i got a good solution....here it is

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related