All array elements are updated instead of one
Here is an online example of my problem: http://jsfiddle.net/xwsuee2j/1/
I am showing multiple data grids on the page. These data grids are created using JavaScript objects. The only difference between these objects is one field, so I did here to save a huge amount of space / code.
Set an array object:
var dxDataGrids = [];
Create a standard object:
var BM_DataGrid = {
showColumnLines: true,
showRowLines: true,
filterRow: {
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: 'Filter Search'
},
height: 'calc(100% - 54px)',
columnAutoWidth: true,
scrolling: {
mode: 'standard',
preloadEnabled: true
},
allowColumnResizing: true
};
Some sources of bogus data:
var dataSource1 = [{
RouteName: 'LE01',
EmployeeRef: 'DRIVER1',
VehicleRef: 'VEHICLE1',
Difference: 0
}, {
RouteName: 'LE02',
EmployeeRef: 'DRIVER2',
VehicleRef: 'VEHICLE2',
Difference: 0
}, {
RouteName: 'LE03',
EmployeeRef: 'DRIVER3',
VehicleRef: 'VEHICLE3',
Difference: 0
}];
var dataSource2 = [{
RouteName: 'LE04',
EmployeeRef: 'DRIVER4',
VehicleRef: 'VEHICLE4',
Difference: 0
}, {
RouteName: 'LE05',
EmployeeRef: 'DRIVER5',
VehicleRef: 'VEHICLE5',
Difference: 0
}, {
RouteName: 'LE06',
EmployeeRef: 'DRIVER6',
VehicleRef: 'VEHICLE6',
Difference: 0
}];
And the bit that spits out my data:
dxDataGrids['Grid1'] = BM_DataGrid;
dxDataGrids['Grid2'] = BM_DataGrid;
dxDataGrids['Grid1'].dataSource = dataSource1; // Set DataSource 1
console.log(dxDataGrids['Grid1'].dataSource); // Write out field for 'Grid1' (CORRECT)
dxDataGrids['Grid2'].dataSource = dataSource2; // Set DataSource 2
console.log(dxDataGrids['Grid2'].dataSource); // Write out field for 'Grid2' (CORRECT)
console.log(dxDataGrids['Grid1'].dataSource); // Write out field for 'Grid1' (INCORRECT)
Basically, I would like to know why updating one of the arrays of objects is updating them all?
source to share
Anders answered perfectly why this is happening, I will try to help you solve the problem. Instead of creating one data grid and referencing it multiple times, you should create multiple data grids, one for each link.
function get_std_BM_DataGrid() {
var dg = {
showColumnLines: true,
showRowLines: true,
filterRow: {
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: 'Filter Search'
},
height: 'calc(100% - 54px)',
columnAutoWidth: true,
scrolling: {
mode: 'standard',
preloadEnabled: true
},
allowColumnResizing: true
};
return dg;
}
Then just do something like dxDataGrids['Grid1'] = get_std_BM_DataGrid();
.
source to share
You have
dxDataGrids['Grid1'] = BM_DataGrid;
dxDataGrids['Grid2'] = BM_DataGrid;
so essentially both elements of the array point to the same object.
Then when installing
dxDataGrids['Grid1'].dataSource = dataSource1;
you are setting datasource
in an object BM_DataGrid
which by the way is the same attribute datasource
on
dxDataGrids['Grid2'].dataSource = dataSource2;
since both elements of the array are the same object, remember? So the "last" datasource
assignment wins, which is exactly what you see.
Has the meaning?
Greetings,
source to share