How to add checkbox status using jquery in gridview?

See more:

C#

jQuery

ASP.NET4

Hello,

How to add checkbox status using jquery in gridview?

I am using this script and c# code for add and bind data using jquery my checkbox column data is not showing
My Code:-

<script type="text/javascript">
        $(function () {
            GetCustomers(1);
        });
        $("[id*=txtSearch]").live("keyup", function () {
            GetCustomers(parseInt(1));
        });
        $(".Pager .page").live("click", function () {
            GetCustomers(parseInt($(this).attr('page')));
        });
        function SearchTerm() {
            return jQuery.trim($("[id*=txtSearch]").val());
        };
        function GetCustomers(pageIndex) {
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
        var row;
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("DealerDetails");
            if (row == null) {
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            }
            $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
            if (customers.length > 0) {
                $.each(customers, function () {
                    var customer = $(this);
                    $("td", row).eq(0).html($(this).find("Status").text()); // What will be add in this line for checkbox display?
                    $("td", row).eq(1).html($(this).find("DealerCode").text());
                    $("td", row).eq(2).html($(this).find("DealerName").text());
                    $("[id*=gvCustomers]").append(row);
                    row = $("[id*=gvCustomers] tr:last-child").clone(true);
                });
                var pager = xml.find("Pager");
                $(".Pager").ASPSnippets_Pager({
                    ActiveCssClass: "current",
                    PagerCssClass: "pager",
                    PageIndex: parseInt(pager.find("PageIndex").text()),
                    PageSize: parseInt(pager.find("PageSize").text()),
                    RecordCount: parseInt(pager.find("RecordCount").text())
                });

                $(".DealerName").each(function () {
                    var searchPattern = new RegExp('(' + SearchTerm() + ')', 'ig');
                    $(this).html($(this).text().replace(searchPattern, "<span class="highlight" >" + SearchTerm() + "</span>"));
                });
            } else {
                var empty_row = row.clone(true);
                $("td:first-child", empty_row).attr("colspan", $("td", row).length);
                $("td:first-child", empty_row).attr("align", "center");
                $("td:first-child", empty_row).html("No records found for the search criteria.");
                $("td", empty_row).not($("td:first-child", empty_row)).remove();
                $("[id*=gvCustomers]").append(empty_row);
            }
        };
    </script>

Search:

<asp:TextBox ID="txtSearch" runat="server" />

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CellPadding="2"
        ForeColor="#333333" GridLines="None" CssClass="someClass" DataKeyNames="DealerLoginName"
        Width="100%" AllowPaging="True">
        <alternatingrowstyle backcolor="White" forecolor="#284775" />
        <columns>
            <asp:TemplateField HeaderText="Status" HeaderStyle-BorderColor="black" HeaderStyle-BorderWidth="1px"
                HeaderStyle-Width="10%" HeaderStyle-BorderStyle="Solid">
                <itemtemplate>
                    <asp:CheckBox ID="chkStatus" runat="server" AutoPostBack="true" Enabled="true" Checked='<%# Convert.ToBoolean(Eval("Status")) %>'
                        Text='<%# Eval("Status").ToString().Equals("True") ? " Approved " : " Pending " %>'
                        OnCheckedChanged="chkStatus_CheckedChanged" />
                </itemtemplate>
                <footerstyle width="10%" />
                <HeaderStyle BorderColor="Black" BorderWidth="1px" BorderStyle="Solid" HorizontalAlign="Center"
                    VerticalAlign="Middle" Width="10%"></HeaderStyle>
                <itemstyle font-size="Small" width="10%" horizontalalign="Left" />
            
            <asp:BoundField DataField="DealerCode" HeaderText="Dealer Code" HeaderStyle-BorderColor="black"
                HeaderStyle-BorderWidth="1px" HeaderStyle-BorderStyle="Solid">
                <footerstyle width="10%" />
                <HeaderStyle BorderColor="Black" BorderWidth="1px" BorderStyle="Solid" Width="10%"
                    HorizontalAlign="Center"></HeaderStyle>
                <itemstyle width="10%" horizontalalign="Left" />
            
            <asp:BoundField DataField="DealerName" HeaderText="Dealer Name" HeaderStyle-BorderColor="black"
                HeaderStyle-BorderWidth="1px" HeaderStyle-BorderStyle="Solid" ItemStyle-CssClass="DealerName">
                <footerstyle width="10%" />
                <HeaderStyle BorderColor="Black" BorderWidth="1px" BorderStyle="Solid" HorizontalAlign="Center"
                    VerticalAlign="Middle" Width="10%"></HeaderStyle>
                <itemstyle width="10%" horizontalalign="Left" />
            
        </columns>
        <editrowstyle backcolor="#999999" />
        <footerstyle backcolor="#5D7B9D" font-bold="True" forecolor="White" width="10%" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Font-Size="Small"
            Width="10%" HorizontalAlign="Center" />
        <pagerstyle backcolor="#284775" forecolor="White" horizontalalign="Center" />
        <rowstyle backcolor="#F7F6F3" forecolor="#333333" font-size="Small" width="10%" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <sortedascendingcellstyle backcolor="#E9E7E2" />
        <sortedascendingheaderstyle backcolor="#506C8C" />
        <sorteddescendingcellstyle backcolor="#FFFDF8" />
        <sorteddescendingheaderstyle backcolor="#6F8DAE" />

my C# Code:-

	protected void Page_Load(object sender, EventArgs e)
    	{
        	if (!IsPostBack)
        	{
            		BindDummyRow();
        	}
    	}

    private void BindDummyRow()
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add(new DataColumn("Status", typeof(bool)));
        dummy.Columns.Add("SNo");
        dummy.Columns.Add("DealerCode");
        dummy.Columns.Add("DealerName");
	dummy.Rows.Add();
        gvCustomers.DataSource = dummy;
        gvCustomers.DataBind();
    }

[WebMethod]
    public static string GetCustomers(string searchTerm, int pageIndex)
    {
        string query = "[procFindDealerDetails]";
        SqlCommand cmd = new SqlCommand(query);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
        cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
        cmd.Parameters.AddWithValue("@PageSize", PageSize);
        cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
        return GetData(cmd, pageIndex).GetXml();
    }

    private static DataSet GetData(SqlCommand cmd, int pageIndex)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                con.Open();
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds, "DealerDetails");
                    DataTable dt = new DataTable("Pager");
                    dt.Columns.Add("PageIndex");
                    dt.Columns.Add("PageSize");
                    dt.Columns.Add("RecordCount");
                    dt.Rows.Add();
                    dt.Rows[0]["PageIndex"] = pageIndex;
                    dt.Rows[0]["PageSize"] = PageSize;
                    dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
            con.Close();
        }
        
    }

please help me.
How to display my checkbox column data in gridview and edit,update delete button also.

Thanks for Advance.

Ankit Agarwal
Software Engineer