Creating multiple grids on the fly - need to associate with multiple js arrays

I'm creating a rather complex form, where the user may enter information about several items, each item will have it's own AW Grid. Each time the user clicks "New Item" button, I create all the form fields (and another AW Grid) for that item. I need to associate each grid with its own js array (or a sub-array). I want to do the following:

var array_of_data = new Array();
var array_of_grids = new Array();
var cols = ["Column 1", "Column 2", "Column 3", "Column 4"];

I've created a function that build the grid:

function create_grid (grid_num) {
obj = array_of_grids[grid_num] = new Active.Controls.Grid;
array_of_data[grid_num] = new Array();
obj.setId("the_grid");
obj.setRowProperty("count", 0);
obj.setColumnProperty("count", 4);
obj.setDataProperty("text", function (i, j) {return array_of_data[grid_num][i][j]});
obj.setColumnProperty("text", function (i) {return cols[i]);
return obj;
}

The function is called for each dynamically built grid, passing in a new grid_num. This part works fine, with the exception of the setDataProperty. Apparently, I can't define a 3-D "matrix" ([grid_num][i][j]) to hold the data.

Any ideas?

I don't see anything wrong in your code except one small thing - you should not assign the same ID to all grids, so it should be "the_grid_" + grid_num or leave it blank (to be assigned automatically). Make sure you don't mix indices somewhere and that you also set row/count after you add data.

Alternatively you can assign data array to the property of the grid and use 'this' keyword to refer to it:

obj.data = myDataArray;
  obj.setDataProperty("text", function (i, j) {return this.data[i][j]});

Alex,

Thanks for the reply. I modified this code according to your suggestions and things are working as expected.