Question

I am having issues creating multiple independent SlickGrid grids from the same object (that is modifications to one grid shouldn’t affect the other grids and vice versa).

Here is the code

var data1 = [];
data1[0] = { myfield: "This is data1" };
// setting data2, see below
var grid1 = new Slick.Grid("#grid1", data1, columns, options);
var grid2 = new Slick.Grid("#grid2", data2, columns, options);

Setting data2

I’ve tried many things:
–var data2 = data1: when doing so, whenever I modify one grid, the other grid gets updated accordingly and vice versa, which I understand is because of this.

–var data2 = jQuery.extend(true, {}, data1) or var data2 = jQuery.extend({}, data1);: in this case SlickGrid simply fails to create the grid for data2 (the grid is empty and its height extends for 4000000px, no warnings/errors/exceptions are thrown) although the object itself seems to be properly created (I can alert it and the its values are good).

How can I create 2 independent grids from the same object (initially) with SlickGrid?

Answer 1

jQuery.extend() works on an object. Here, you have to create a second array and clone every individual item from the first array separately.