BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
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 }); } }); |