Immutable mode in EJ2 JavaScript Grid control
13 Apr 202316 minutes to read
The immutable mode optimizes the Grid re-rendering performance by using the object reference and deep compare
concept. When performing the Grid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows.
To enable this feature, you have to set the enableImmutableMode
property as true.
- This feature uses the primary key value for data comparison. So, you need to provide the
isPrimaryKey
column.
ej.grids.Grid.Inject(ej.grids.Page);
var immutableStart;
var normalStart;
var primaryKey = 0;
var immutableInit = true;
var init = true;
var immutableGrid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
pageSettings: { pageSize: 50 },
enableImmutableMode: true,
beforeDataBound: function() {
immutableStart = new Date().getTime();
},
dataBound: function() {
var val = immutableInit ? '' : new Date().getTime() - immutableStart;
document.getElementById('immutableDelete').innerHTML = 'Immutable rendering Time: ' + "<b>" + val + "</b>" + '<b>ms</b>';
immutableStart = 0; immutableInit = false;
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
{ field: 'ProductName', headerText: 'Product Name', width: 160 },
{ field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'CustomerName', headerText: 'Customer Name', width: 160 }
],
height: 240
});
immutableGrid.appendTo('#immutable');
document.getElementById('delete').addEventListener('click', function(e) {
immutableGrid.dataSource.splice(0, 5);
normalGrid.setProperties({ dataSource: immutableGrid.dataSource });
immutableGrid.setProperties({ dataSource: immutableGrid.dataSource });
});
document.getElementById('addtop').addEventListener('click', function(e) {
var addedRecords = [
{'OrderID': ++primaryKey, 'ProductName': 'Chai', 'ProductID': 'Sasquatch Ale', 'CustomerID': 'QUEDE', 'CustomerName': 'Yoshi Tannamuri'},
{'OrderID': ++primaryKey, 'ProductName': 'Georg Pipps', 'ProductID': 'Valkoinen suklaa', 'CustomerID': 'RATTC', 'CustomerName': 'Martín Sommer'},
{'OrderID': ++primaryKey, 'ProductName': 'Yoshi Tannamuri', 'ProductID': 'Gula Malacca', 'CustomerID': 'COMMI', 'CustomerName': 'Ann Devon'},
{'OrderID': ++primaryKey, 'ProductName': 'Palle Ibsen', 'ProductID': 'Rogede sild', 'CustomerID': 'RATTC', 'CustomerName': 'Paula Wilson'},
{'OrderID': ++primaryKey, 'ProductName': 'Francisco Chang', 'ProductID': 'Mascarpone Fabioli', 'CustomerID': 'ROMEY', 'CustomerName': 'Jose Pavarotti'}
]
var aData = addedRecords.concat(immutableGrid.dataSource);
normalGrid.setProperties({ dataSource: aData });
immutableGrid.setProperties({ dataSource: aData });
});
document.getElementById('addbottom').addEventListener('click', function(e) {
var addedRecords = [
{'OrderID': ++primaryKey, 'ProductName': 'Chai', 'ProductID': 'Sasquatch Ale', 'CustomerID': 'QUEDE', 'CustomerName': 'Yoshi Tannamuri'},
{'OrderID': ++primaryKey, 'ProductName': 'Georg Pipps', 'ProductID': 'Valkoinen suklaa', 'CustomerID': 'RATTC', 'CustomerName': 'Martín Sommer'},
{'OrderID': ++primaryKey, 'ProductName': 'Yoshi Tannamuri', 'ProductID': 'Gula Malacca', 'CustomerID': 'COMMI', 'CustomerName': 'Ann Devon'},
{'OrderID': ++primaryKey, 'ProductName': 'Palle Ibsen', 'ProductID': 'Rogede sild', 'CustomerID': 'RATTC', 'CustomerName': 'Paula Wilson'},
{'OrderID': ++primaryKey, 'ProductName': 'Francisco Chang', 'ProductID': 'Mascarpone Fabioli', 'CustomerID': 'ROMEY', 'CustomerName': 'Jose Pavarotti'}
]
var aData = immutableGrid.dataSource.concat(addedRecords);
normalGrid.setProperties({ dataSource: aData });
immutableGrid.setProperties({ dataSource: aData });
});
document.getElementById('reverse').addEventListener('click', function(e) {
var aData = immutableGrid.dataSource.reverse();
normalGrid.setProperties({ dataSource: aData });
immutableGrid.setProperties({ dataSource: aData });
});
document.getElementById('paging').addEventListener('click', function(e) {
var totalPage = immutableGrid.dataSource.length / immutableGrid.pageSettings.pageSize;
var page = Math.floor(Math.random() * totalPage) + 1;
normalGrid.setProperties({ pageSettings: { currentPage: page } });
immutableGrid.setProperties({ pageSettings: { currentPage: page } });
});
var normalGrid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
pageSettings: { pageSize: 50 },
beforeDataBound: function() {
normalStart = new Date().getTime();
},
dataBound: function() {
var val = init ? '' : new Date().getTime() - normalStart;
document.getElementById('normalDelete').innerHTML = 'Normal rendering Time: ' + "<b>" + val + "</b>" + '<b>ms</b>';
normalStart = 0; init = false;
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
{ field: 'ProductName', headerText: 'Product Name', width: 160 },
{ field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'CustomerName', headerText: 'Customer Name', width: 160 }
],
height: 240
});
normalGrid.appendTo('#normal');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<style>
.immutablegrid,
.normalgrid {
pointer-events: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<script id="template" type="text/x-template">
<div class="image">
<img src="${Id}.png" alt="${Id}" />
</div>
</script>
<table>
<tbody>
<tr>
<td>
<span id="immutableDelete"></span>
</td>
</tr>
<tr>
<td>
<span id="normalDelete"></span>
</td>
</tr>
<tr>
<td>
<div>
<button id="addtop" class="e-control e-btn e-lib e-info">Add 5 rows at top</button>
<button id="addbottom" class="e-control e-btn e-lib e-info">Add 5 rows at bottom</button>
<button id="delete" class="e-control e-btn e-lib e-info">Delete 5 rows</button>
<button id="reverse" class="e-control e-btn e-lib e-info">Sort Order ID</button>
<button id="paging" class="e-control e-btn e-lib e-info">Paging</button>
</div>
</td>
</tr>
<tr>
<td>
<span><b>Immutable Grid</b></span>
<div id="immutable" class="immutablegrid"></div>
</td>
</tr>
<tr>
<td>
<span><b>Normal Grid</b></span>
<div id="normal" class="normalgrid"></div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Limitations
The following features are not supported in the immutable mode:
- Frozen rows and columns
- Row Template
- Detail Template
- Hierarchy Grid
- Column reorder
- Virtual scroll
- Infinite scroll
- Grouping