Another Method of Bind Gridview using JSON

JQUERY :-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "BindgridusingWebMethod.aspx/GetUserInfoData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert("Failure : " + response.d);
                },
                error: function (response) {
                    alert("Error : " + response.d);
                }
            });
        });

        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var users = xml.find("Table");
            //create a new row from the last row of gridview
            var row = $("[id*=grdDemo] tr:last-child").clone(true);
            //remove the lst row created by binding the dummy row from code behind on page load
            $("[id*=grdDemo] tr").not($("[id*=grdDemo] tr:first-child")).remove();
            var count = 1;
            $.each(users, function () {
                //var users = $(this);               
                $("td", row).eq(0).html($(this).find("FullName").text());
                $("td", row).eq(1).html($(this).find("DOB").text());
                $("td", row).eq(2).html($(this).find("Gender").text());
                $("td", row).eq(3).html($(this).find("MobileNo").text());
                $("td", row).eq(4).html($(this).find("Salary").text());
                $("td", row).eq(5).html($(this).find("Isactive").text());
                $("[id*=grdDemo]").append(row);
                //define the background stryle of newly created row        
                if (count == 1 || (count % 2 != 0)) {
                    $(row).css("background-color", "#ffffff");
                }
                else {
                    $(row).css("background-color", "#D2CDCD");
                }
                count = count + 1;
                row = $("[id*=grdDemo] tr:last-child").clone(true);
            });
        }
    </script>

ASPX CODE :-

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
<asp:Button ID="btnshowgrid" runat="server" Text="Show Gridview" OnClick="btnshowgrid_Click" />&nbsp;<asp:Button
        ID="clear" runat="server" Text="Clear" onclick="clear_Click" />
<div>
        <asp:GridView ID="gvDetails" runat="server" >
            <HeaderStyle BackColor="#474747" Font-Bold="true" ForeColor="White" />
        </asp:GridView>
        <br />
        <asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="false">
        <HeaderStyle BackColor="#474747" Font-Bold="true" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="FullName" HeaderText="Full Name" />
                <asp:BoundField DataField="DOB" HeaderText="DOB" />
                <asp:BoundField DataField="Gender" HeaderText="Gender" />
                <asp:BoundField DataField="MobileNo" HeaderText="Mobile No." />
                <asp:BoundField DataField="Salary" HeaderText="Salary" />
                <asp:BoundField DataField="Isactive" HeaderText="Isactive" />
           </Columns>
        </asp:GridView>
    </div>

CODE BEHIND :-

protected void btnshowgrid_Click(object sender, EventArgs e)
        {
            BindgridRow();
        }

private void BindgridRow()
        {
            DataTable dummy = new DataTable();
            dummy.Columns.Add("FullName");
            dummy.Columns.Add("DOB");
            dummy.Columns.Add("Gender");
            dummy.Columns.Add("MobileNo");
            dummy.Columns.Add("Salary");
            dummy.Columns.Add("Isactive");
            dummy.Rows.Add();
            grdDemo.DataSource = dummy;
            grdDemo.DataBind();
        }

[WebMethod]
        public static string GetUserInfoData()
        {
            string query = "SELECT FullName,CONVERT(varchar(30),DOB,101) AS DOB,Gender,MobileNo,Salary,Isactive    FROM form ORDER BY Pid ";
            string strConnString = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString;
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlCommand cmd = new SqlCommand(query, con))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        using (DataSet ds = new DataSet())
                        {
                            sda.Fill(ds);
                            return ds.GetXml();
                        }
                    }
                }
            }
        }

protected void clear_Click(object sender, EventArgs e)
        {
            grdDemo.DataSource = null;
            grdDemo.DataBind();
        }

CLICK ON BUTTON :-