Display jQuery HandsonTable from database in ASP.Net

Hi Irshad786,

Here I have created smaple that will help you out.It shows How to bind using Handsontable.

for more info and js lib,please refer below link

https://github.com/handsontable/handsontable

HTML

<div>
    <link href="Css/handsontable.css" rel="stylesheet" type="text/css" />
    <script src="Js/ZeroClipboard.js" type="text/javascript"></script>
    <script src="Js/pikaday.js" type="text/javascript"></script>
    <script src="Js/moment.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="Js/handsontable.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/LoadTable",
                contentType: "application/json; charset=utf-8",
                data: {},
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Customers");
                    var Data = [];
                    var header = [];
                    header[0] = 'CustomerId';
                    header[1] = 'Name';
                    header[2] = 'Country';
                    Data.push(header);
                    $(customers).each(function () {
                        var cust = [];
                        cust[0] = $(this).find("CustomerId").text()
                        cust[1] = $(this).find("Name").text()
                        cust[2] = $(this).find("Country").text()
                        Data.push(cust);
                    });
                    var container2 = document.getElementById('dataTable'), hot2;

                    hot2 = new Handsontable(container2, {
                        data: Data
                    });
                },
                error: function (xhr, status) {
                    alert("An error occurred: " + status);
                }
            });
        });
    
    </script>
    <div id="dataTable">
    </div>
</div>

Code

[WebMethod]
public static string LoadTable()
{
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    DataSet ds = new DataSet();
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers"))
        {
            cmd.Connection = con;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable("Customers");
                sda.Fill(dt);
                ds.Tables.Add(dt);
            }
        }
    }
    return ds.GetXml();
}

Screenshot