Category / Section
How to refresh the Grid after record changes on client-side?
1 min read
Problem
Adding or removing a record from client-side and refreshing the changes in the Grid content.
Solution
The Grid records can be manually added from the client-side by using the model.dataSource.push function and you can also remove a record by using the model.dataSource.splice function. After adding or removing a record from the Grid data source, the Grid can be refreshed using the refreshContent function.
JS
<button id="Add">Add</button> <button id="Remove">Remove</button><br /> <div id="Grid"></div> <script type="text/javascript"> $("#Add").ejButton({ type: "button", click: function (args) { var gridObj = $("#Grid").ejGrid("instance"); var data = { OrderID: 10247, CustomerID: "ASDFG", EmployeeID: 4 }; gridObj.model.dataSource.push(data); gridObj.refreshContent(); } }); $("#Remove").ejButton({ type: "button", click: function (args) { var gridObj = $("#Grid").ejGrid("instance"); var selectedRow = gridObj.selectedRowsIndexes[0]; if (selectedRow != undefined) gridObj.model.dataSource.splice(selectedRow, 1); else alert("No records selected for delete operation"); gridObj.refreshContent(); } }); </script>
Screenshot
Figure 1: After adding a record
Figure 2: After removing a record