SlickGrid documentation improvement

SlickGrid is a small javascript component for displaying tables. A distinctive feature of this component is its concentration on the order in which information is displayed, and not on working with its (information) source. Another feature of SlickGrid is very poor documentation, including a description of how to work through AJAX.

SlickGrid is a pretty good javascript grid, which works equally fast with both 500 and 500 000 entries in the table. The idea is to add to the DOM only those elements that are currently displayed, and to delete elements that are not currently displayed. SlickGrid is also used for StackExchange Data Explorer .

However, the use of SlickGrid in their projects causes difficulties due to the almost complete lack of documentation, the role of which, according to the author’s idea, should be performed by examples , questions / answers on StackOverflow , and also a Google group . Well, in any case, it's better than nothing.

I wanted to load data depending on the request parameters without redrawing the entire page, that is, using AJAX. In the example set there is a variant of using AJAX data loading with filtering. Great, what I need! True example gives some error, but oh well (let digg.com be guilty). We look at the “documentation”, that is, an example sample. Aha, some object of type Slick.Data.RemoteModel from slick.remotemodel.js is used. Hm, what's going on here? It turns out that this question worries not only me ( one , two ).
')
Okay, postpone until this moment. In addition to AJAX, I want to use pagination to look at table rows An object of type Slick.Controls.Pager is used for this. But stop! As an argument of the constructor of this object should be an object of type Slick.Data.DataView. How to link DataView and RemoteModel? Smacks shooting from a cannon on the sparrows ... Let us put aside for now this moment. Also, I want the grid to occupy the entire page except for the top field with the query parameters. Among the examples there is a suitable option . True, if we add a page view to this example, we will not see the grid itself anymore.



As a result, the SlickGrid fork repository was made and an example was added with the solution of the problems described. Everything turned out to be quite simple.

To organize AJAX downloads, you need to link instances of objects such as Slick.Data.DataView and Slick.Grid (the first is responsible for storing data for display, the second renders the grid):

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

Data loading must be performed through an object of type Slick.Data.DataView:

 function getData() { $.get(url, function(data) { dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); }); } 

In order for the grid and other elements to occupy the entire area of ​​the page, it is enough to set the internal height of the SlickGrid user interface to the desired height and execute a special method of the Slick.Grid object:

 var h = $("#container").height()-$("#header").height()-$("#pager").height()-$(".slick-header").height(); $(".slick-viewport").height(h); grid.resizeCanvas();