Category / Section
Need to delete multiple selected record for checkbox column
4 mins read
This knowledge base explains how to delete multiple selected records in Grid.
Solution:
In Grid the multiple selected record using checkbox column can be deleted by using the batchUrl of ejDataManager API.
The following code example demonstrates how to delete multiple selected records in Grid with normal edit mode.
HTML
<div id="Grid"></div>
JS
1. Render the Grid Control.
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource : ej.DataManager({
url: "/Grid/UrlDataSource",
batchUrl: "/Grid/BatchUpdate",
adaptor : "UrlAdaptor"
}),
allowPaging:true,
editSettings: {allowEditing: true, allowAdding: true, allowDeleting: true},
toolbarSettings: { showToolbar: true, toolbarItems: ["add","edit","delete","update","cancel"] },
columns: [
{ type:'checkbox', width:80},
{ field: "OrderID", headerText:'Order ID', isPrimaryKey: true, width: 80 },
{ field: "EmployeeID", headerText:'Employee ID', width: 85 },
{ field: "CustomerID", headerText:'Customer ID', width: 90 },
{ field: "Freight", headerText:'Freight', width: 85 },
]
});
});
</script>
MVC
@(Html.EJ().Grid<OrdersView>("Grid")
.Datasource(ds => ds.URL("/Grid/UrlDataSource").BatchURL("/Grid/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))
.AllowPaging()
.ToolbarSettings(a => a.ShowToolbar().ToolbarItems(b =>
{
b.AddTool(ToolBarItems.Add);
b.AddTool(ToolBarItems.Edit);
b.AddTool(ToolBarItems.Delete);
b.AddTool(ToolBarItems.Update);
b.AddTool(ToolBarItems.Cancel);
}))
.EditSettings(edit=> edit.AllowAdding().AllowDeleting().AllowEditing())
.Columns(col =>
{
col.Type("checkbox").Width(80).Add();
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(85).Add();
col.Field("CustomerID").HeaderText("Customer ID").TextAlign(TextAlign.Left).Width(90).Add();
col.Field("Freight").HeaderText("Freight").Width(85).Add();
})
)
ASP
<ej:Grid ID="Grid" ClientIDMode="Static" runat="server" AllowPaging="True"> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel" ></ToolbarSettings> <DataManager URL="Default.aspx/UrlDataSource" BatchURL="Default.aspx/BatchUpdate" Adaptor="WebMethodAdaptor" /> <Columns> <ej:Column Type="checkbox" Width="80" /> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="80" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="85" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" /> <ej:Column Field="Freight" HeaderText="Freight" Width="85" /> </Columns> </ej:Grid>
CORE
<ej-grid id="FlatGrid" allow-paging="true">
<e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"add","edit","delete","update","cancel" })>
</e-toolbar-settings>
<e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings>
<e-datamanager url="Home/DataSource" batch-url="Home/BatchUpdate" adaptor="UrlAdaptor"></e-datamanager>
<e-columns>
<e-column type="checkbox" width="80"></e-column>
<e-column field="OrderID" header-text="OrderID" is-primary-key="true" width="80"></e-column>
<e-column field="EmployeeID" header-text="EmployeeID" width="85"></e-column>
<e-column field="CustomerID" header-text="CustomerID" width="90"></e-column>
<e-column field="Freight" header-text="Freight" width="85"></e-column>
</e-columns>
</ej-grid>
Angular
<ej-grid id="Grid" [dataSource]="DataManager" [allowPaging]="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings"> <e-columns> <e-column type="checkbox" width="80px"></e-column> <e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="80px"></e-column> <e-column field="EmployeeID" headertext="Employee ID" width="85px" ></e-column> <e-column field="CustomerID" headerText="Customer ID" width="90px"></e-column> <e-column field="Freight" headerText="Freight" width="85px" ></e-column> </e-columns> </ej-grid>
TS
export class AppComponent {
public editSettings;
public toolbarItems;
public DataManager : any;
constructor() {
this.DataManager = new ej.DataManager({ url: "/../Grid/UrlDataSource" , batchUrl:"/../Grid/BatchUpdate", adaptor: new ej.UrlAdaptor() });
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
}
}
2. CRUD operations handling in server-side.
ASP
In ASP.NET we have used WebMethodAdaptor for performing server-side and CRUD operations in Grid.
C#
public partial class _Default : Page
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void BatchUpdate(List<Orders> changed, List<Orders> added, List<Orders> deleted)
{
if (deleted != null)
for (int i = 0; i <= deleted.Count() - 1; i++)
{
var record = order.Where(o => o.OrderID == deleted.ElementAt(i).OrderID).FirstOrDefault();
order.Remove(record);
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object UrlDataSource(DataManager value)
{
IEnumerable data = BindDataSource();
DataOperations ds = new DataOperations();
var count = data.AsQueryable().Count();
data = ds.PerformSkip(data, value.Skip); //Paging
data = ds.PerformTake(data, value.Take);
return new { result = data, count = count };
}
}
MVC
In ASP.NET MVC, we have used URLAdaptor for performing server-side and CRUD operations in Grid.
C#
public class GridController : Controller
{
public static List<Orders> order = new List<Orders>();
public ActionResult BatchUpdate(List<Orders> changed, List<Orders> added, List<Orders> deleted)
{
if (deleted != null)
{
for (var i = 0; i < deleted.Count(); i++)
{
order.Remove(order.Where(or => or.OrderID == deleted[i].OrderID).FirstOrDefault());
}
}
var data = order;
return Json(data, JsonRequestBehavior.AllowGet);
}
public ActionResult DataSource(DataManager dm)
{
BindDataSource();
DataResult result = new DataResult();
DataOperations operation = new DataOperations();
result.result = order;
result.count = result.result.AsQueryable().Count();
if (dm.Skip > 0)
result.result = operation.PerformSkip(result.result, dm.Skip);
if (dm.Take > 0)
result.result = operation.PerformTake(result.result, dm.Take);
return Json(new { result = result.result, count = result.count });
}
}
Core
In ASP.NET Core we have used URLAdaptor for performing server-side and CRUD operations in Grid.
C#
public ActionResult BatchUpdate([FromBody]submitvalue myObject)
{
if (myObject.Deleted != null && myObject.Deleted.Count > 0)
{
foreach (var temp in myObject.Deleted)
{
orderdetail.Remove(orderdetail.Where(or => or.OrderID == temp.OrderID).FirstOrDefault());
}
}
var data = orderdetail;
return Json(data);
}
public ActionResult DataSource([FromBody]DataManager dm)
{
BindDataSource();
IEnumerable data = orderdetail;
DataOperations operation = new DataOperations();
int count = orderdetail.Count();
if (dm.Skip != 0)
{
data = operation.PerformSkip(data, dm.Skip);
}
if (dm.Take != 0)
{
data = operation.PerformTake(data, dm.Take);
}
return Json(new { result = data, count = count });
}
public class submitvalue
{
public List<OrderData> Added { get; set; }
public List<OrderData> Changed { get; set; }
public List<OrderData> Deleted { get; set; }
public object Key { get; set; }
}
Result:
Figure 1: At initial rendering with multiple record get selected through checkbox column.
Figure 2: After deleting the multiple selected record in Grid.
