We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<button id="btn" onclick="Save()">Click to save changes</button>
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
var data = @(Html.Raw(Json.Encode(@Request.RequestContext.HttpContext.Session["data"])));
$("#Grid").ejGrid({
dataSource: ej.DataManager({
json: data,
adaptor: new ej.remoteSaveAdaptor(),
batchUrl:"/Home/BatchUpdate"
}),
allowPaging:true,
actionFailure: "Failure",
...
columns: [
...
],
load:"load",
});
});
</script>
<script type="text/javascript">
function load(args) {
this.model.dataSource.adaptor = new customAdaptor();
}
function Failure(args){
alert("delete failed. Please press the cancel icon to retrieve the deleted record");
}
var customAdaptor = new ej.remoteSaveAdaptor().extend({
batchRequest: function (dm, changes, e) {
var obj = []
obj.push(changes);
var res = {
changed: changes.changed,
added: changes.added,
deleted: changes.deleted,
action: "batch",
table: e.url,
key: e.key
};
return {
type: "POST",
url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.url,
contentType: "application/json; charset=utf-8",
dataType: "json",
ejPvtData: obj,
data: JSON.stringify(res)
};
},
processResponse: function (data, ds, query, xhr, request, changes) {
var i;
var pvt = request && request.ejPvtData;
if(request != undefined){
for (i = 0; i < changes.added.length; i++)
ej.JsonAdaptor.prototype.insert(ds, changes.added[i]);
for (i = 0; i < changes.changed.length; i++)
ej.JsonAdaptor.prototype.update(ds, "OrderID", changes.changed[i]);
for (i = 0; i < changes.deleted.length; i++)
ej.JsonAdaptor.prototype.remove(ds, "OrderID", changes.deleted[i]);
} // updated the data after modification in grid
return this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]);
}
});
function Save(){
var grid = $("#Grid").ejGrid("instance");
grid.batchSave();
}
</script>
[HomeController.cs]
public ActionResult BatchUpdate(List<EditableOrder> added,List<EditableOrder> changed, List<EditableOrder> deleted)
{
...
if (deleted != null)
{
throw new Exception("TEST"); //making to fail the post when deleting action takes place
}
...
} |
| Clientside:- @(Html.EJ().Grid<object>("Editing") .Datasource(ds => { ds.URL("/odata").Adaptor(AdaptorType.ODataV4Adaptor); }) .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .Query("new ej.Query().from('Orders')") .SelectedRowIndex(0) .AllowPaging() .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(50).Add(); col.Field("EmployeeID").HeaderText("Employee ID").Width(50).Add(); col.Field("ShipCity").HeaderText("ShipCity").Width(50).Add(); }) .ClientSideEvents(eve => { eve.RowSelected("rowSelected"); }) ) @(Html.EJ().Grid<object>("DetailGrid") .Datasource((IEnumerable<object>)ViewBag.datasource2) .AllowPaging(false) .IsResponsive() .Columns(col => { col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(125).Add(); }) ) <script type="text/javascript"> $(function () { window.rowSelected = function (args) { var employeeID = args.data.EmployeeID; var data = @(Html.Raw(Json.Encode(ViewBag.dataSource2))); var detaildata = ej.DataManager(data).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(10)); var gridObj = $("#DetailGrid").ejGrid("instance"); gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5))); } }); </script> |
| public class OrdersController : ODataController { NORTHWNDEntities db = new NORTHWNDEntities(); [EnableQuery] public IQueryable<Order> Get() { return db.Orders; } // PUT odata/Orders(5) public async Task<Order> Put(int key, Order order) //Edit operation in database { var entity = await db.Orders.FindAsync(order.OrderID); db.Entry(entity).CurrentValues.SetValues(order); await db.SaveChangesAsync(); return order; } //// POST odata/Orders public async Task<Order> Post(Order order) //Add Operation in database { db.Orders.Add(order); await db.SaveChangesAsync(); return order; } //// DELETE odata/Orders(5) public async Task<IHttpActionResult> Delete([FromODataUri] int key) { var od = await db.Orders.FindAsync(key); if (od == null) { return NotFound(); } db.Orders.Remove(od); await db.SaveChangesAsync(); return StatusCode(HttpStatusCode.NoContent); } } |
| @(Html.EJ().Grid<object>("Editing") .Datasource(ds => { ds.URL("/odata/Employees").Adaptor(AdaptorType.ODataV4Adaptor); }) . . . . . .SelectedRowIndex(0) .AllowPaging() .ClientSideEvents(eve => { eve.RowSelected("rowSelected"); }) ) @(Html.EJ().Grid<object>("DetailGrid") . .. . . . .Columns(col => { col.Field("EmployeeID").AllowEditing(false).HeaderText("Employee ID").Add(); col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Add(); col.Field("Freight").HeaderText("Freight").Add(); }) ) <script type="text/javascript"> function rowSelected(args) { var employeeID = args.data.EmployeeID; var gridObj = $("#DetailGrid").ejGrid("instance"); gridObj.option({ query: ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false), dataSource: ej.DataManager({ url: "/odata/Orders", adaptor: new ej.ODataV4Adaptor() }), actionBegin: function (args) { if (args.requestType == "refresh") this.model.columns[0].defaultValue = employeeID; } }) } </script> |
