I have a problem populating a jsgrid from with JSON data and I have scaled down the code to a very minimal implementation but it is still not working. I can see in the Chrome debugger that the REST call returns data on this format

{data: [{ "Name":"MyAccount"}]}

Anyone who can see what is wrong?

<script>
   

    $(function () {

        $("#jsGrid").jsGrid({
            height: "auto",
            width: "100%",

            sorting: true,
            paging: false,
            autoload: true,
           
            controller: {
                loadData: function (filter) {
                    console.log(filter);
                    return $.ajax({
                        type: "GET",
                        url: "http://localhost:8888/GetListJSGrid",
                        data: filter,
                        dataType: "json"
                    });
                }
            },
           
            fields: [
             { name: "Name", type: "text", width: 150 }
            ]
        });
    });

I have a problem populating a jsgrid from with JSON data and I have scaled down the code to a very minimal implementation but it is still not working. I can see in the Chrome debugger that the REST call returns data on this format

{data: [{ "Name":"MyAccount"}]}

Anyone who can see what is wrong?

<script>
   

    $(function () {

        $("#jsGrid").jsGrid({
            height: "auto",
            width: "100%",

            sorting: true,
            paging: false,
            autoload: true,
           
            controller: {
                loadData: function (filter) {
                    console.log(filter);
                    return $.ajax({
                        type: "GET",
                        url: "http://localhost:8888/GetListJSGrid",
                        data: filter,
                        dataType: "json"
                    });
                }
            },
           
            fields: [
             { name: "Name", type: "text", width: 150 }
            ]
        });
    });

• javascript
• jquery
• json
• jsgrid

2 Answers 2

The format of returned data should be an array of items, not a JSON object with data field.

Note that for loading by page (pageLoading: true) this format is different: { data: [arrayOfItems], totalCount: amountOfItems }.

For the code above you could do the following:

loadData: function (filter) {
    console.log(filter);
    return $.ajax({
        type: "GET",
        url: "http://localhost:8888/GetListJSGrid",
        data: filter,
        dataType: "json"
    }).then(function(result) {
        return result.data;
    });
}

Ok, I solved. It seems that the documentation is not updated for JSGrid or that I have missed something here.

By paring the response from the link below that is working in JSGrid

ODataTest

I noticed that the following JSON is accepted by JSGrid {"value": [{ "Name":"MyAccount"}]}