CODEWITHSUNDEEP
slickgrid
nav
nav

Reputation: 158

Multiple Slickgrid on the same page

I am creating multiple grids on a page dynamically based on the data returned from server side. Pushing all of the created grids to an arrayOfGrids. However, I am facing issue when I have to add data to a new cell of a new row. Its gets added to last grid. How can I get this done? My code is something like this below:-

    var index = 0;
for ( var k = 0; k < steps.length; k++) {
var gridId = "#dataGrid_" + index++;
var grid;
var columns = new Array();
for ( var jj = 0; jj < rows[0].cells.length; jj++) {
    var key = {
        id : rows[0].cells[jj],
        name : rows[0].cells[jj],
        field : rows[0].cells[jj],
        //toolTip : 'Click to sort',
        //width : 200,
        sortable : true,
        editor : Slick.Editors.LongText
    };
    columns[jj] = key;
}
var data = [];
for ( var i = 1; i < rows.length; i++) {
    var tempData = (data[i - 1] = {});
    var title = null;
    var val = null;
    for ( var q = 0; q < rows[i].cells.length; q++) {
        title = rows[0].cells[q];
        val = rows[i].cells[q];
        tempData[title] = val;
    }
}

var options = {
    enableCellNavigation : true,
    editable: true,
    asyncEditorLoading: false,
    enableColumnReorder: true,
    enableAddRow: true,
    autoHeight: true,
    leaveSpaceForNewRows:false,
    explicitInitialization: true
};
var myGrid = $("<div id='"+gridId+"' style='width:400px;'></div>");
grid = new Slick.Grid(myGrid, data, columns, options);
myGrid.appendTo($("#tableData"));
grid.init();
grid.onAddNewRow.subscribe(function(e,args){
    // Always adds to last grid ?

});
arrayOfGrids.push(grid);
}

Upvotes: 1

Views: 1528

Answers (1)

nav
nav

Reputation: 158

Ok. I got this working based on javascript closure. Best is extract the grid creation code in to a separate function and call the function in for loop. Everything working like charm after that.

function createGrid(gridId, rows) {
var grid;
var colIndex = 0;
var columns = new Array();
for ( var jj = 0; jj < rows[0].cells.length; jj++) {
    var key = {
        id : rows[0].cells[jj],
        name : rows[0].cells[jj],
        field : rows[0].cells[jj],
        //toolTip : 'Click to sort',
        //width : 200,
        sortable : true,
        editor : Slick.Editors.LongText
    };
    columns[jj] = key;
}
var data = [];
for ( var i = 1; i < rows.length; i++) {
    var tempData = (data[i - 1] = {});
    var title = null;
    var val = null;
    for ( var q = 0; q < rows[i].cells.length; q++) {
        title = rows[0].cells[q];
        val = rows[i].cells[q];
        tempData[title] = val;
    }
}

var options = {
    enableCellNavigation : true,
    editable: true,
    asyncEditorLoading: false,
    enableColumnReorder: true,
    enableAddRow: true,
    autoHeight: true,
    leaveSpaceForNewRows:false,
    explicitInitialization: true
};
var myGrid = $("<div id='"+gridId+"' style='width:400px;'></div>");
grid = new Slick.Grid(myGrid, data, columns, options);
myGrid.appendTo($("#tableData"));
grid.init();
arrayOfGrids.push(grid);

 grid.onAddNewRow.subscribe(function (e, args) {

var item = args.item;
     grid.invalidateRow(data.length);
     data.push(item);
     grid.updateRowCount();
     grid.render();
 });

}

and call that function from the for loop.

Upvotes: 1

Related Questions