how to fill gridview in using jquery
  • i want to bind gridview using jquery in populate data from sql database kindly provide complete and easy source code.
  • 2 Comments sorted by
  • Vote Up0Vote Down WaqasWaqas
    172.00 Karma Accepted Answer
    hi below is very simple code who fetch data from database and fill it on gridview using jquery.

    aspx  code

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head runat="server">
        <script type="text/javascript" src=""></script>
        <script type="text/javascript">
            $(function () {
                    type: "POST",
                    url: "Default.aspx/GetData",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                    error: function (response) {

            function OnSuccess(response) {
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var countries = xml.find("Table");
                var row = $("[id*=GridView1] tr:last-child").clone(true);
                $("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove();
                $.each(countries, function () {
                    var country = $(this);
                    $("td", row).eq(0).html($(this).find("CountryId").text());
                    $("td", row).eq(1).html($(this).find("CountryName").text());
                    row = $("[id*=GridView1] tr:last-child").clone(true);
        <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
        Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor = "White">
            <asp:BoundField ItemStyle-Width="150px" DataField="CountryId" HeaderText="Country ID" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CountryName" HeaderText="Country Name" />

    aspx.cs  code

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Web.Services;

    public partial class _Default : System.Web.UI.Page

    protected void Page_Load(object sender, EventArgs e)
    if (!IsPostBack)

    private void FillGrid()
    DataTable dt = new DataTable();
    GridView1.DataSource = dt;

    public static string GetData()
    string query = "SELECT * FROM tblCountry";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
    private static DataSet GetData(SqlCommand cmd)
    string strConnString = @"Data Source=.\sqlExpress;Initial Catalog=dbTest;Integrated Security=SSPI; pooling=false";
    using (SqlConnection con = new SqlConnection(strConnString))
    using (SqlDataAdapter sda = new SqlDataAdapter())
    cmd.Connection = con;
    sda.SelectCommand = cmd;
    using (DataSet ds = new DataSet())
    return ds;


    just copy paste above code.
  • Hello,

    How could you write jquery if columns are in itemtemplate also as showing below:

                                        <ItemStyle Width="40" />
                                            <asp:CheckBox ID="chkSelect" runat="server" Checked='<%# Eval("Checked") %>'  />
                                    <asp:BoundField DataField="UtilityName" HeaderStyle-HorizontalAlign="Left" HeaderText="TDSP"
                                        ItemStyle-HorizontalAlign="Left" ItemStyle-Width="250">
                                        <HeaderStyle HorizontalAlign="Left" />
                                        <ItemStyle HorizontalAlign="Left" Width="250px" />
                                            <asp:HiddenField ID="hdnTDSPID" runat="server" Value='<%# Eval("TDSPID") %>' />                                                                             

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook


Popular Posts of the Week

    Optimum Creative