I'm encountering an issue with utilizing multiple Slickgrids on a single page. With the number of grids changing dynamically, I generate them within a JavaScript function and maintain them in a grid array as shown below.
var columns = [];
var options = [];
for(var i=0; i<value; i++){
options[i] = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: true,
autoEdit: false,
forceFitColumns: false,
//fullWidthRows: true,
syncColumnCellResize: true,
rerenderOnResize: true,
topPanelHeight: 30,
rowHeight: 22,
cellHighlightCssClass: "changed",
cellFlashingCssClass: "current-server"};
}
for(var i=0; i<value; i++) {
columns[i].push({id: value, name: value, field: value});
columns[i].push({id: value2, name: value2, field: value2});
columns[i].push({id: value3, name: value3, field: value3});
}
var arrayOfGrids = [];
for(var i=0; i<value; i++) {
dataView = new Slick.Data.DataView();
arrayOfGrids.push(new Slick.Grid('#' + i, dataView, columns[i], options[i]));
// ....
However, I am struggling to manage events for these grids because I believe each grid's events should be handled separately. Even if the events are meant to be the same across all grids, I am unsure how to distinguish which grid's event is being triggered.
If anyone has a solution, please assist me!