Articles → JQUERY → Loop through gridview using jQuery

Loop through gridview using jQuery

Introduction

In this tutorial we will discuss about looping through the rows and columns of a gridview using jQuery. JQuery has given a function each() from which we can iterate through any collection, but in this tutorial we will use this function to iterate through the gridview.

Prerequisite

Before reading this tutorial you should

   1. Have hands on experience in creating ASP.Net application.

   2. Have basic knowledge of jQuery.

   3. Know how to bind a grid from any datasource(preferably XML file for this tutorial).

Sample program

Let us start working on an example. First of all create a new ASP.Net application with C# as the code behind language.

Now on the page default.aspx drag a gridview from the toolbox(or write a code manually).

  <asp:GridView ID="gvTest" runat="server"> </asp:GridView>

We will code further on the gridview but before we move on it is the time to create a datasource. For the sake of this tutorial I am creating a XML file but you can use any datasource and bind it with the grid.

  <root>
  <income mode="Salary" amount="5000"></income>
  <income mode="Shares" amount="2000"></income>
  <income mode="Part time job" amount="1000"></income>
  <income mode="Tuitions" amount="500"></income>
</root>

This is an xml data which gives the information about the persons salary from different modes. Please note that there are 2 attributes of the income tag i.e. mode and salary. Now our job is to show these 2 attributes in the gridview columns.

Now come back to the code behind page of default.aspx and write the following code to fetch the data from an XML file and bind it to the grid.

protected void Page_Load(object sender, EventArgs e)
{
      DataSet ds = new DataSet();
      ds.ReadXml(Server.MapPath("test.xml"));
      gvTest.DataSource = ds.Tables[0];
      gvTest.DataBind();
}

In the code we have created an instance of a dataset i.e. ds. Then read the xml file test.xml placed on the root of the project using the ReadXml() method. Finally bind the grid by setting the datasource and using the databind function. If you know the basic of binding the grid then it is easy to understand this code.

Now lets come back to aspx page and write the code in the gridview

<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Label ID="lblMode" runat="server" ToolTip="MODE" Text='<%#Eval("mode") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>                
      <ItemTemplate>
        <asp:Label ID="lblAmount" ToolTip="AMOUNT" runat="server" Text='<%#Eval("amount") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>
<div id="totalDiv">
</div>

In the grid we have added an attribute AutoGenerateColumns and set its value to false. Then in the grid we have added an itemtemplate and add labels inside it to show data we have fetched from the xml file.

An important point to notice is ToolTip property on the label. This property is to uniquely identify the column. There is a div below the gridview. This div is to show the sum of amount.

View Source

Now run the program and you can see the data is bound to the gridview columns. Before I move to the JQuery part it is important to see the source of the webpage and see how the html for the gridview is rendered.

<table cellspacing="0" rules="all" border="1" id="gvTest" style="border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col"> </th>
</tr><tr>
<td>
                    <span id="gvTest_ctl02_lblMode" title="MODE">Salary</span>
                </td><td>
                    <span id="gvTest_ctl02_lblAmount" title="AMOUNT">5000</span>
                </td>
		</tr><tr>
			<td>
                    <span id="gvTest_ctl03_lblMode" title="MODE">Shares</span>
                </td><td>
                    <span id="gvTest_ctl03_lblAmount" title="AMOUNT">2000</span>
                </td>
		</tr><tr>
			<td>
                    <span id="gvTest_ctl04_lblMode" title="MODE">Part time job</span>
                </td><td>
                    <span id="gvTest_ctl04_lblAmount" title="AMOUNT">1000</span>
                </td>
		</tr><tr>
			<td>
                    <span id="gvTest_ctl05_lblMode" title="MODE">Tuitions</span>
                </td><td>
                    <span id="gvTest_ctl05_lblAmount" title="AMOUNT">500</span>
                </td>
		</tr>
	</table>

This is the rendered html code for the gridview. See the code above and notice that the gridview is rendered as table with row and columns inside the table. It is also worth to notice that ASP.Net labels are rendered as span tag and ToolTip attribute of label is rendered as title. Now let us move onto the jQuery part.

Syntax

$("<Collection_or_any_Control>").each(function() {
}
);

JQuery code

<script language="javascript" type="text/javascript">
  $(document).ready(
    function() {
      var total = 0;
      $("table tr td span").each(function() {
        if($(this).attr("title") == 'AMOUNT'){  
          total = total + parseInt($(this).text());
        }
      });
      $("div#totalDiv").text(total);                
    }
 );        
</script>

As you have seen in the view source the hierarchy of the controls are table – tr – td – span.

So in the jQuery we can access the span like $("table tr td span"). So as per the each method syntax the code should be

$("table tr td span").each(function() {
}
);

This code will iterate through all the spans inside the table. To get the object of each span you can use this keyword. For example this.id will give the id of the particular span.

if($(this).attr("title") == 'AMOUNT'){  }

In this line we are checking what is the value of title attribute of span tag. If the value is AMOUNT then it means we are accessing the label with ID lblAmount. Add all the values in a variable called total and finally display the result in the div called totalDiv.

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, November 25, 2011

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250