Articles in this section
Category / Section

How to delete multiple records while using remote data in grid?

1 min read

This knowledge base explains how to delete multiple selected records in server while using remote data binding in grid.




By default, “removeUrl” property of dataManager is used to handle single record for delete action, so for handling multiple records deletion in server, need to use batchUrl property of dataManager.


Render the Grid control with batchUrl property of DataManager.



<div id="FlatGrid"></div>



    var data = @Html.Raw(Json.Encode(ViewBag.datasource));
    var DataManager = ej.DataManager({ json: data, adaptor: new ej.remoteSaveAdaptor(), batchUrl: "Grid/Remove" });
    $(function () {
            dataSource: DataManager,
            allowPaging: true,
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
            editSettings:{ allowEditing: true, allowAdding: true, allowDeleting: true},
            allowSelection: true,
            selectionType: "multiple",
            columns: [
                { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 90 },
                { field: "CustomerID", headerText: "Customer ID", width: 90 },
                { field: "EmployeeID", headerText: "Employee ID", width: 90 },
                { field: "ShipCity", headerText: "Ship City", width: 90 }



       .Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.datasource).BatchURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor))
        .EditSettings(edit => edit
        .ToolbarSettings(toolbar =>
                     toolbar.ShowToolbar().ToolbarItems(items =>
         .Columns(col =>
HeaderText("Order ID").Width(90).Add();
                   col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
                   col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add();
                   col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();


public class GridController : Controller
         public ActionResult GridFeatures()
            var DataSource = OrderRepository.GetAllRecords();
            ViewBag.datasource = DataSource;
            return View();
        public ActionResult Remove(List<EditableOrder> deleted)
            if (deleted != null)
            var data = OrderRepository.GetComplexRecords();
            return Json(data, JsonRequestBehavior.AllowGet);



<ej:DataManager ID="FlatData" runat="server" Adaptor="remoteSaveAdaptor" BatchURL="GridFeatures.aspx/Remove"/>
        <ej:Grid ID="FlatGrid"    AllowPaging="True" DataManagerID="FlatData" 
              AllowSelection="True" Selectiontype="Multiple"
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="90" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"/>
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="90"/>
                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />
<ToolbarSettings ShowToolbar="True" ToolbarItems="  add,edit,delete,update,cancel">
              <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>



        protected void Page_Load(object sender, EventArgs e)
        private void BindDataSource()
            this.FlatData.Json = OrderRepository.GetAllRecords();
         [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
         public static void Remove(string action, List<EditableOrder> deleted)
            if (deleted != null)
            var data = OrderRepository.GetAllRecords();
            return Json(data);    


.Net core

<ej-grid id="FlatGrid" allow-paging="true" allow-scrolling="true" allow-selection="true" selectiontype="Multiple">
                <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" batch-url="Remove" adaptor="remoteSaveAdaptor" />
                <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() { "add", "edit", "delete","update","cancel" }) />
                <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings>
                    <e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="90" ></e-column>
                    <e-column field="CustomerID" header-text="Customer ID" width="90" ></e-column>
                    <e-column field="EmployeeID" header-text="Employee ID" width="90" ></e-column>
                    <e-column field="ShipCity" header-text="Ship City" width="90" ></e-column> </e-columns>
public partial class GridController : Controller
        public static List<OrderDetails> order = new List<OrderDetails>();
        public ActionResult GridFeatures()
            if (order.Count() == 0)
            ViewBag.datasource = order;
            return View();
        public ActionResult Remove([FromBody] batchchanges myObject)
            if (myObject.Deleted != null && myObject.Deleted.Count > 0)
                foreach (var temp in myObject.Deleted)
                    order.Remove(order.Where(or => or.OrderID == temp.OrderID).FirstOrDefault());
            var data = order;
            return Json(data); 
        public class batchchanges
            public List<OrderDetails> Added { get; set; }
            public List<OrderDetails> Changed { get; set; }
            public List<OrderDetails> Deleted { get; set; }
            public object Key { get; set; }





<ej-grid [dataSource]="gridData" allowPaging="true" allowSelection="true" selectionType="multiple" [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
        <e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="90"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="90"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="90"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="90"></e-column>




export class GridComponent {
    public gridData: any;
    public editSettings;
    public toolbarItems;
    constructor() {
        this.gridData = new ej.DataManager({ json: Data, batchUrl: "/Grid/Remove", adaptor: new ej.remoteSaveAdaptor() });
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };




Figure 1 Before Deleting the Records




Figure 2 After Deleted the Records

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment