how to create multiple slickgrids with a single function

Question

I have a problem which I cannot seem to solve. I need to create a function which loops over an array of datasets and creates an independent slickgrids for each dataset. The catch is that the functions need to be bound to each grid independently. For example:

// this part works fine
for(var i=0; i<domain.length; i++){
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options);
    var data = domain[i].data;
    // this works well and I am able to create several slickgrid tables
    ... etc ...

The problem is that every grid is now called "grid". Therefore, when I bind a function like this:

    // controls the higlighting of the active row
    grid.highlightActiveRow = function () {
        var currentCell;
        currentCell = this.getActiveCell();

I get a result which affects all grids (or in some cases only one grid).

How do I create multiple, independent grids with associated functions??? The problems seems to be that I have created one object "grid" and then assign all functions using the syntax grid.xxx - but I dont know how to create a unique object on each itteration.

Any help would be most appreciated.

PS: slickgrid is just amazing!!

Thanks

//****** UPDATE ********* @Jokob, @user700284

Thank you both for your help. Here is where I have manged to get to:

var dataView;
function buildTable() {

for(i = 0; i<domains.length; i++){
    dataView = new Slick.Data.DataView();
    var d = domains[i];
    grid = new Slick.Grid('#' + d.name, dataView, d.columns, grids.options);
    var data = d.data;
    grid.init();
    dataView.beginUpdate();
    dataView.setItems(data);
    // dataView.setFilter(filter); -- will be reinstated once i have this working
    dataView.endUpdate();
    arrOfGrids.push(grid);
    };
};

Jakob - for now i am sticking to "for(i)" until I can wrap my head around your comment - which seems very sensible.

But, using the above, the grid data are not populating. I am not getting any js errors and the column headers are populating but not the data. The reference to d.data is definitely correct as I can see the data using the Chrome js debugger.

Any ideas? Many thanks for your help so far

Answer 1

Instead of assign all new grids to grid (in which case you overwrite the old one everytime you create a new one), push them to an array:

var arrayOfGrids = [];
for(var i=0; i<domain.length; i++) { 
    dataView = new Slick.Data.DataView();
    arrayOfGrids.push(new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options));
    // ....

Then, when you want to something with your grids, like adding the highlight-function, you loop over the array and do it for each element:

for ( var i=0; i<arrayOfGrids.length; i++ ) {
    arrayOfGrids[i].highlightActiveRow = function () {
        var currentCell;
        currentCell = this.getActiveCell();
        // ... etc...

BONUS

While we're at it, I would recommend that you use the forEach method that's available on the array-object when iterating over the arrays, rather than the for-loop. The unlike the loop, forEach creates a proper scope for your variables and it gets rid of the useless i-iteration variable:

var arrayOfGrids = [];
domain.forEach(function(d) {
    dataView = new Slick.Data.DataView();
    arrayOfGrids.push(new Slick.Grid('#' + d.name, dataView, d.columns, d.options));
    // ....

And then the same for the other loop of course :)

Answer 2

You could try adding each of the grid instances to an array.You will be able to handle each of the grids differently if you want, by means of <arrray>[<array-index>]

var gridArr = [];
// this part works fine
for(var i=0; i<domain.length; i++){
    dataView = new Slick.Data.DataView();
    var grid = new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options);
    var data = domain[i].data;
    // this works well and I am able to create several slickgrid tables
    ... etc ...
gridArr.push(grid)

Then if you say gridArr[0] you can access the 1st grid,gridArr[1] second grid and so on.

Answer 3

Just in case anybody else is following this question - here is the working solution:

Many many thanks to @Jokob and @user700284

// default filter function
function filter(item) {
    return true; // this is just a placeholder for now
}

var dataView;
function buildTables() {

    for(i = 0; i<domains.length; i++){
        dataView = new Slick.Data.DataView();
        var d = domains[i];
        grid = new Slick.Grid('#' + d.name, dataView, d.columns, options);
        var data = d.data;

        grid.init();
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.setFilter(filter);
        dataView.endUpdate();
        grid.invalidate();
        grid.render();

        arrOfGrids.push(grid);
    };
};