Bind Data to GridView Using jQuery

Introduction

This article explains how to bind data to a GridView using jQuery.

Sometimes before I need to show some data in a grid but not show the redirected page on any type of click obviously I choose jQuery. I bind the data to the GridView using Ajax calls and jQuery.

If you inspect the GridView in your browser then you must have noticed that the GridView has <th>, <tr> and <td> tags to show the data so I used this technique to bind the data to the Grid :).

Step 1

First of all I create some checkboxes on which the Grid needs to be bound, on each new click the new data is to be shown. So here I am simply creating some checkboxes for examples.

<table>
  <tr>
    <td>
      <div id="div1" style="width: 170px; height: 160px;">
        <asp:CheckBox ID="chk1" runat="server" />
        <asp:Label ID="lbl" runat="server" Text=":Legal Status Report" AssociatedControlID="chk1"></asp:Label>
        <hr />
         Category:
   <br />
        <asp:CheckBox runat="server" ID="chk2" />
          :Fresh Recognition
   <br />
        <asp:CheckBox runat="server" ID="chk3" />
          :Renewal Recognition
   <br />
        Legal Status Category:
   <br />
         <asp:DropDownList ID="drp2" Width="100px" runat="server">
            <asp:ListItem Text="Select" Selected="True"></asp:ListItem>
            <asp:ListItem Text="Item1"></asp:ListItem>
         </asp:DropDownList>
      </div>
     </td>
   </tr>
</table>

Now I add a GridView that is to be bound on different clicks:

<asp:GridView ID="grd" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FFF1D4" />
    <SortedAscendingHeaderStyle BackColor="#B95C30" />
    <SortedDescendingCellStyle BackColor="#F1E5CE" />
    <SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>

Step 2

Now our jQuery work begins. First of all add a jQuery library so that our jQuery code can work otherwise it will give you an error something like "$ is not defined" and this error can only be seen in the console so don't try to find it in the UI.

Just add this line and your jQuery will start working:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Now I wrote the following code for the click of the first checkbox:

 <script>
     $(document).ready(function () {
         $('#chk1').click(function () {
                 $('#grd').empty();
                 load_Data();
             }
         })
       });
</script>

Here I call the function load_Data(). In this function the Ajax call is made for a web method that is on the aspx.cs page:

function load_Data() {
    debugger;
    $.ajax({
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        url: 'WebForm2.aspx/Get_Data',
        data: "{}",
        dataType: 'JSON',
        success: function (response) {
            $('#grd').append("<tr><th>Recognition_Type </th><th>Recognition_Number </th></tr>")
            for (var i = 0; i < response.d.length; i++) {
                debugger;
                $('#grd').append("<tr><td>" + response.d[i].Recognition_Type + "</td><td>" + response.d[i].Recognition_Number + "</td></tr>")
            };

        },
        error: function () {

            alert("Error");
        }
    });
    return false;
};

In the code behind web method a simple SQL connection is made for retrieving some data from a table named "testReport". From this data a list is created that is returned to the Ajax success function.

[WebMethod]
public static List<Info> Get_Data()
{
    SqlConnection conn = new SqlConnection(@"your connection");
    DataTable dt = new DataTable();

    conn.Open();
    SqlCommand cmd = new SqlCommand("select * from testReport", conn);
    cmd.CommandType = CommandType.Text;
    var d = cmd.ExecuteReader();
    dt.Load(d);
    List<Info> list = new List<Info>();
    Info info;
    foreach (DataRow dr in dt.Rows)
    {
        info = new Info(dr["Recognition_Type"].ToString(), dr["Recognition_No"].ToString());
        list.Add(info);
    }
    conn.Close();
    return list;
}

public class Info
{
    public Info(string recognition_type, string recognition_number)
    {
        this.Recognition_Type = recognition_type;
        this.Recognition_Number = recognition_number;
    }
    private string _type;
    private string _number;
    public string Recognition_Type
    {
        get { return _type; }
        set { _type = value; }
    }
    public string Recognition_Number
    {
        get { return _number; }
        set { _number = value; }
    }
}

 Step 3

When the list is returned it goes into the success function otherwise when an error occurs it will g into the error function.

On reaching the success function some headings are appended to the GridView because it works like a table on the UI.

After this data is recieved it is append to the columns of the GridView.

success: function (response) {
    $('#grd').append("<tr><th>Recognition_Type </th><th>Recognition_Number </th></tr>")
    for (var i = 0; i < response.d.length; i++) {
        $('#grd').append("<tr><td>" + response.d[i].Recognition_Type + "</td><td>" + response.d[i].Recognition_Number + "</td></tr>")
    };

},
error: function () {
    alert("Error");
}

Step 4

Now if some other checkbox is checked then a new function is called named "load_Fresh_Data()" but before calling this function the Grid is made empty so that new data can be bound to the Grid.

$('#CheckBox1').click(function () {
        $('#grd').empty();
        load_RND_Data();
    });

In this new function again the same procedure executes, in other words again an Ajax call is made, again a SQL connection is created and some data is fetched, a list is returned to the success function that is bound to the columns of the GridView otherwise an error message is shown.

function load_RND_Data() {
    $.ajax({
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        url: 'WebForm2.aspx/load_RND_Data',
        data: "{}",
        dataType: 'JSON',
        success: function (response) {
            $('#grd').append("<tr><th>Company_Name </th><th>Legal_Status_Category </th></tr>")
            for (var i = 0; i < response.d.length; i++) {
                $('#grd').append("<tr><td>" + response.d[i].Company_Name + "</td><td>" + response.d[i].Legal_Status_Category + "</td></tr>")
            };

        },
        error: function () {
            alert("Error");
        }
    });
    return false;
};

Output

 

On running the  application I click the first checkbox and get an output like this one:

 

 

 On clicking the new checkbox the Grid will bound again with new data.