jsGrid loadData not being called

Question

So I am really struggling getting jsGrid up and running with my Django site, specifically using a controller to load the data in the table from an ajax request. It wasn't working, so I set up this very basic configuration just to see what was going on with my loadData function in my controller. Using the below configuration, the only thing that gets printed in the console is "In Script." so it's obviously not calling loadData within the controller. Maybe this simple "test" configuration isn't correct either. Please, what am I missing here? It has to be something silly.

{% extends 'layouts/layout_1.html' %}

{% block title %}Demos{% endblock %}

{% block content%}

<div id="demos-js-grid"></div>

{% endblock %}

{% block other_js %}

<script>

$(document).ready(function() {

    console.log("In Script.")
    $("#demos-js-grid").jsGrid({

        onDataLoading: function(args) {
          console.log("On Data loading.")
        },

        width: "100%",
        height: "100%",

        inserting: true,
        editing: true,
        sorting: true,

        autoLoad: true,

        controller: {
            loadData: function(filter) {
                console.log("loadData being called..");
            },
            insertItem: function(item) {
                console.log("insertItem being called..")
            },
            updateItem: function(item) {
                console.log("updateItem being called..")
            },
            deleteItem: function(item) {
                console.log("deleteItem being called..")
            }
        },

        fields: [
            { name: "Client Status", type: "text", width: 50 },
            { name: "Bee Status", type: "text", width: 50 },
            { name: "Store Status", type: "text", width: 50 },
            { name: "Region", type: "text", width: 100 },
            { name: "Chain", type: "text", width: 100 },
            { name: "Store", type: "text", width: 150 },
        ]
    });
})


</script>

{% endblock%}

Are you sire you have the div element on the page with this id, and that the script block goes after this element? — tabalin
You almost certainly need to wrap the whole thing within the jQuery $(function() { ... }) to ensure it only runs once the DOM is ready. — Daniel Roseman
Then most probably this is the problem of not having div when you initialize the grid. So it's defintely better to follow @DanielRoseman's advise. — tabalin
Thanks for taking a look everyone. I included my entire template in my post now and added the jquery's $(document).ready(function(){...}); to my <script>. I can also confirm that the table itself is displayed/visible on my page when it loads with the fields I have defined. — blosche
tabalin is the winner with "autoload" vs. "autoLoad" yeesh. Thank you. — blosche

tabalin tabalin · Accepted Answer · 2016-12-03T22:24:08

The option should be autoload: true, instead of autoLoad.

In fact, currently since auto-loading is not activated the grid is not loading, but you can still load it calling loadData method yourself.

jsGrid loadData not being called

1 Answers