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.
Solution:
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.
HTML
<div id="FlatGrid"></div>
JS
<script>
var data = @Html.Raw(Json.Encode(ViewBag.datasource));
var DataManager = ej.DataManager({ json: data, adaptor: new ej.remoteSaveAdaptor(), batchUrl: "Grid/Remove" });
$(function () {
$("#FlatGrid").ejGrid({
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 }
]
});
});
</script>
MVC
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.datasource).BatchURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor))
.EditSettings(edit => edit
.AllowAdding()
.AllowDeleting()
.AllowEditing())
.AllowPaging()
.AllowSelection()
.SelectionType(SelectionType.Multiple)
.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);
});
})
.Columns(col =>
{
col.Field("OrderID").IsPrimaryKey(true).
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();
})
)
[CS]
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)
OrderRepository.ComplexDelete(deleted);
var data = OrderRepository.GetComplexRecords();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
ASP
<ej:DataManager ID="FlatData" runat="server" Adaptor="remoteSaveAdaptor" BatchURL="GridFeatures.aspx/Remove"/> <ej:Grid ID="FlatGrid" AllowPaging="True" DataManagerID="FlatData" AllowSelection="True" Selectiontype="Multiple" runat="server"> <Columns> <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" /> </Columns> <ToolbarSettings ShowToolbar="True" ToolbarItems=" add,edit,delete,update,cancel"> </ToolbarSettings> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> </ej:Grid>
[CS]
protected void Page_Load(object sender, EventArgs e)
{
BindDataSource();
}
private void BindDataSource()
{
this.FlatData.Json = OrderRepository.GetAllRecords();
this.FlatGrid.DataBind();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void Remove(string action, List<EditableOrder> deleted)
{
if (deleted != null)
OrderRepository.Delete(deleted);
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-columns>
<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>
</ej-grid>
[CS]
public partial class GridController : Controller
{
public static List<OrderDetails> order = new List<OrderDetails>();
public ActionResult GridFeatures()
{
if (order.Count() == 0)
BindDataSource();
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; }
}
}
Angular
<ej-grid [dataSource]="gridData" allowPaging="true" allowSelection="true" selectionType="multiple" [toolbarSettings]="toolbarItems" [editSettings]="editSettings"> <e-columns> <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> </e-columns> </ej-grid>
[ts]
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"] };
}
}
Output
Figure 1 Before Deleting the Records
Figure 2 After Deleted the Records
