how to fill gridview in asp.net using jquery
  • i want to bind gridview using jquery in asp.net 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetData",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });

            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());
                    $("[id*=GridView1]").append(row);
                    row = $("[id*=GridView1] tr:last-child").clone(true);
                });
            }
        </script>
    </head>
    <body>
        <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">
        <Columns>
            <asp:BoundField ItemStyle-Width="150px" DataField="CountryId" HeaderText="Country ID" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CountryName" HeaderText="Country Name" />
        </Columns>
    </asp:GridView>
        </form>
    </body>
    </html>


    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)
    {
    FillGrid();
    }
    }

    private void FillGrid()
    {
    DataTable dt = new DataTable();
    dt.Columns.Add("CountryId");
    dt.Columns.Add("CountryName");
    dt.Rows.Add();
    GridView1.DataSource = dt;
    GridView1.DataBind();
    }

    [WebMethod]
    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())
    {
    sda.Fill(ds);
    return ds;

    }
    }
    }
    }
    }


    just copy paste above code.
  • Hello,

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

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


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

Tagged

Popular Posts of the Week

    Optimum Creative