We have analyzed your query and you are performing CRUD operation outside the grid. We can perform CRUD operations using the methods addrecord, deleterecord, updaterecord.
1. We can add a new record using addRecord method of ejGrid. We have already created a UG documentation for addrecord method, please refer the following link:
Link : http://help.syncfusion.com/UG/JS_CR/ejGrid.html#%20addRecord
2. We can delete a record using deleteRecord method of ejGrid. We have already created a UG documentation for the editrecord method, please refer the following link:
Link : http://help.syncfusion.com/UG/JS_CR/ejGrid.html#deleteRecord
3. We can update the record using updateRecord method of ejGrid. We have already created a UG documentation for the updaterecord method, please refer the following link:
Link : http://help.syncfusion.com/UG/JS_CR/ejGrid.html#updateRecord
To reload the grid data , we suggest you to use dataSource method of ejGrid. Please find the following code snippet
var grid = $("#Grid").ejGrid("instance");
grid.dataSource(data); // data indicates updated dataSource |
var grid = $("#Grid").ejGrid("instance"); |
<div id="Grid"></div> <button id="button"> Insert </button> <button id="button1"> Delete </button> <button id="button2"> Update </button> <script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: ej.DataManager({ json: window.gridData, updateUrl: "/Grid/Update", insertUrl: "/Grid/Insert", removeUrl: "/Grid/Delete", adaptor: "remoteSaveAdaptor" }), endEdit: "edit", allowPaging : true, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 }, { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true } }, { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" }, { field: "ShipName", headerText: 'Ship Name', width: 150 }, { field: "ShipCountry", headerText: 'Ship Country', width: 90 } ] }); }); $("#button").ejButton({ click: function (args) { var grid = $("#Grid").ejGrid("instance"); var data = { OrderID: 10247, CustomerID: "STRPQ", EmployeeID: 4, Freight:12.34, ShipName:"Titanic", ShipCountry: "Mexico" }; grid.addRecord(data); } }); $("#button1").ejButton({ click: function (args) { var grid = $("#Grid").ejGrid("instance"); grid.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); } }); $("#button2").ejButton({ click: function (args) { var grid = $("#Grid").ejGrid("instance"); grid.updateRecord("OrderID", { OrderID: 10251, EmployeeID: 3 }); } }); |