Slickgrid Loader and Datagrid issue

Question

Having trouble getting slick grid to show the ajax loading spinner while the data is loading. Code below, Any help appreciated. This code may be missing a few bracked but you gett the idea. I'm trying to put the ajax spinner into the page for when the data loads however I have a couple other controls that are conflicting so not sure if I'm implementing this correctly....

var loadingIndicator = null;

                                    dataView = new Slick.Data.DataView();
                                    grid = new Slick.Grid("#_data", dataView, columns, options);
                                    pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));

                                     grid.onViewportChanged.subscribe(function (e, args) {
                                         var vp = grid.getViewport();
                                         loader.ensureData(vp.top, vp.bottom);
                                       });

                                    function comparer(a, b) {
                                        var x = a[sortcol],
                                            y = b[sortcol];
                                        return (x == y ? 0 : (x > y ? 1 : -1));
                                    }
                                    grid.onSort.subscribe(function (e, args) {
                                        sortdir = args.sortAsc ? 1 : -1;
                                        sortcol = args.sortCol.field;
                                        dataView.sort(comparer, args.sortAsc);
                                    });


                                     loader.onDataLoading.subscribe(function () {
                                         if (!loadingIndicator) {
                                          loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
                                           var $g = $("#_data");

                                           loadingIndicator
                                               .css("position", "absolute")
                                               .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2)
                                               .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2);
                                         }

                                         loadingIndicator.show();
                                       });

                                       loader.onDataLoaded.subscribe(function (e, args) {
                                         for (var i = args.from; i <= args.to; i++) {
                                           grid.invalidateRow(i);
                                         }

                                        grid.updateRowCount();
                                        grid.render();

                                         loadingIndicator.fadeOut();
                                       });



                                      //  loadingIndicator.fadeOut();


                                    dataView.beginUpdate();
                                    $("#_data").show();
                                    dataView.onRowCountChanged.subscribe(function (e, args) {
                                        grid.updateRowCount();
                                        grid.render();
                                    });

                                    dataView.onRowsChanged.subscribe(function (e, args) {
                                        grid.invalidateRows(args.rows);
                                        grid.render();
                                    });

                                    dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
                                        var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
                                        var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
                                        var options = grid.getOptions();

                                        if (options.enableAddRow != enableAddRow) {
                                            grid.setOptions({
                                                enableAddRow: enableAddRow
                                            });
                                        }
                                    });
                                    dataView.beginUpdate();
                                    dataView.setItems(data);
                                    dataView.endUpdate();

                                 // load the first page
                                    grid.onViewportChanged.notify();

                                })
                            }
                        })
                            .fail(function (t) {
                                alert("didn't work.");
                            });
                    }

Answer 1

This loading thing is not working this way as far as I have also tried. I tried solving this issue by initializing the "loadingIndicator" in the "loadTable" section.

var loadingIndicator = $("<span class='loading-indicator'><label>Loading...</label></span>").appendTo(document.body);
loadingIndicator.css("position", "absolute");

and then after you are done updating the grid after endUpdate() I used

loadingIndicator.css("display", "none");

This helped me get the loading indicator when grid is loading the data in the table. This might not be the best way, but did worked for me, you may want to try once. Improvise according to your project requirement. Rest of the css part remains the same.

Answer 2

You forgot to write the px .. Try this code..

.css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2 + "px")
.css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2 + "px");