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 distinguishing feature of SlickGrid is its very poor documentation, including a description of how to work through AJAX.

SlickGrid is a pretty good javascript grid that works equally fast with both 500 and 500,000 records in a table. The idea is to add only the elements that are currently displayed in the DOM and 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 intention, should be performed by examples , questions / answers on StackOverflow , as well as the 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, i.e. using AJAX. There is an option in the set of examples.Using AJAX data loading with filtering. Great, what I need! True example gives some kind of error, but oh well (let digg.com be to blame). We look at the "documentation", that is, examples of example. Yeah, some kind of object like Slick.Data.RemoteModel from slick.remotemodel.js is used. Hmm, what's going on here? It turns out that this question excites not only me ( one , two ).

Okay, put this moment aside. Besides AJAX, I want to use paginated table row lookups. An object of type Slick.Controls.Pager is used for this. But stop! The constructor argument of this object should be an object of type Slick.Data.DataView. How to link DataView and RemoteModel? It smells like gunshots on sparrows ... We will postpone this moment for now. 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 . However, if we add pagination to this example, the grid itself we will no longer see.



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

To organize AJAX loading, you need to link together instances of objects of the type 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’s enough to set the internal height of the SlickGrid user interface and set a special method for the object of the Slick.Grid type:

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