How to refresh the Grid after record changes on client-side?
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
