loadData just won't work

Question

Below is my complete code. There are no errors and Directory is empty is shown.

<script>
    $(document).ready(function() {
        $("#table").jsGrid({
            width: "100%",
            height: "auto",
            paging: false,
            autoload: false,
            noDataContent: "Directory is empty",

            controller: {
                loadData: function(filter) {
                    var data = {
                        data: [{
                            nickname: "test",
                            email: "t@gmail.com"
                        }]
                    };
                    console.log(data);
                    return data;
                }
            },
            fields: [{
                name: "nickname",
                type: "text",
                width: 80,
                title: "Name"
            }, {
                name: "email",
                type: "text",
                width: 100,
                title: "Email Address",
                readOnly: false
            }]
        });
    });
</script>

The console output is as below. Is there anything incorrect about the formatting?

Is there a way to enable more diagnostics, like printing out what data it is actually receiving so as to allow troubleshooting?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You need to set autoload:true

`autoload (default false)`

A boolean value specifying whether controller.loadData will be called when grid is rendered.

And also you need to return data.data inside of loadData() mehtod because you have array inside of data.

CODE SNIPPET

controller: {
    loadData: function(filter) {

        var data = {
            data: [{
                nickname: "test",
                email: "t@gmail.com"
            }]
        };
        return data.data; //As per your data array is like this console.log(data.data) so you need to send like this data.data
    }
},

DEMO

$(document).ready(function() {

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

        //for loadData method Need to set auto load true
        autoload: true,

        noDataContent: "Directory is empty",

        controller: {
            loadData: function(filter) {
            
            alert('Table load data method fire because we have set config autoload:true')
                var data = {
                    data: [{
                        nickname: "test",
                        email: "t@gmail.com"
                    }]
                };
                return data.data;//As per your data array is like this console.log(data.data) so you need to send like this data.data
            }
        },

        fields: [{
            name: "nickname",
            type: "text",
            width: 80,
            title: "Name"
        }, {
            name: "email",
            type: "text",
            width: 100,
            title: "Email Address",
            readOnly: false
        }]
    });
    
    $("#table1").jsGrid({
        width: "100%",
        height: "auto",
        paging: false,

        //for loadData method will not work with auto load false
        autoload: false,

        noDataContent: "Directory is empty",

        controller: {
            loadData: function(filter) {
               alert('Table 1 load data method not fire')
                return []
            }
        },

        fields: [{
            name: "nickname",
            type: "text",
            width: 80,
            title: "Name"
        }, {
            name: "email",
            type: "text",
            width: 100,
            title: "Email Address",
            readOnly: false
        }]
    });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>


<div id="table"></div>
<br>
<br>
<br>
<div id="table1"></div>

Thanks! My `autoload` was true, but I set it false while testing different permutations. It was the `data.data` that does the trick. — Old Geezer, Jul 04 '18 at 06:34
yes because jsgrid will accept data inform of Array. So need to pass an array of data. — Narendra Jadhav, Jul 04 '18 at 06:40

loadData just won't work

1 Answers1

autoload (default false)

`autoload (default false)`