CODEWITHSUNDEEP
javascriptjqueryslickgrid
Archana
Archana

Reputation: 41

How do I get a loader while loading data into the SlickGrid?

I am using SlickGrid with minimal configuration. In that while scrolling the grid the blank page will be displayed, but I want to display a loader instead of a blank page? How can that be done?

Upvotes: 0

Views: 1398

Answers (1)

ghiscoding
ghiscoding

Reputation: 13214

I use spin.js to do the job, very neat and configurable and all done in javascript. Now for how I call it inside my code, I simply define a centered <div> inside my HTML page and then in my JS code, I call the spinner before getting the data and stop it once data is completely loaded.

HTML Code

<!-- Create a center div only to attach a Spinner to be in center of body -->
<div id="center" style="position:fixed;top:50%;left:50%"></div>

JavaScript Code

// Start a spinner before calling AJAX
var center = document.getElementById('center');
var spinner = new Spinner().spin(center);


$.ajax({
    url: ajaxUrl,
    type: "POST",
    data: data,
    dataType: "JSON",
    success: function (serverResponse) {
        grid = new Slick.Grid("#myGrid", serverResponse, columns, options);
        // ...

        spinner.stop(); // stop the spinner once you finished loading data
    }
});

Upvotes: 3

Related Questions