How to load data in Handsontable using Ajax JQuery?

Question

i am using the below code to load data from ASP.Net using Jquery and AJAX. But when it loads the Handsontable loads only one cell with array data.

I have tried different ways with no luck. Please help me to load data from the server.

function showGetResult() {

            $.ajax({
                type: "POST",
                url: "Input.aspx/LoadTable",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {
                    alert(res); 

                    $("#exampleGrid").handsontable({
                        data: res,
                        rowHeaders: false,


                        stretchH: 'all',
                        minSpareRows: 0,
                        contextMenu: true
                    });

                },
                error: function (xhr, status) {
                    alert("An error occurred: " + status);
                }
            });
        }


<WebMethod()> <ScriptMethod()> _
    Public Shared Function LoadTable() As String
        Dim dsCosts As New DataSet
        dsCosts = DataAccess.LoadTables
        Dim serializer As New JavaScriptSerializer()
        Dim dt As New DataTable()
        '.... Get datatable 
        Dim data As String = GetJson(dt)
        Return data
    End Function

Private Shared Function GetJson(dt As DataTable) As String
        Dim serializer As New JavaScriptSerializer()
        Dim rows As New List(Of Dictionary(Of String, Object))()
        Dim row As Dictionary(Of String, Object) = Nothing
        Dim rowCount As Integer = 0

        For Each dr As DataRow In dt.Rows
            row = New Dictionary(Of String, Object)()
            For Each col As DataColumn In dt.Columns
                row.Add(col.ColumnName.Trim(), dr(col))
            Next
            '   row.Add("RowNumber", "R||" & rowCount)
            rows.Add(row)
            Dim temp As String = serializer.Serialize(rows)
            rowCount += 1
        Next
        Return serializer.Serialize(rows)
    End Function

score 0 · Answer 1 · edited Oct 22 '20 at 14:06

After struggling, I got the answer. Hope it help others.

You have to parse the data before binding it to Handsontable:

$.ajax({
    type: "POST",
    url: "Test.aspx/LoadTable",
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    success: function (res) {
        part = res.d;
        let data = JSON.parse(part);
        $('#dataTable').handsontable('loadData', data);
    },
    error: function (xhr, status) {
        alert("An error occurred: " + status);
    }
});

How to load data in Handsontable using Ajax JQuery?

1 Answers1