Batch Editing
2 Mar 20224 minutes to read
In batch edit mode, when you double-click on the grid cell, then the target cell changed to edit state. You can bulk save (added, changed and deleted data in the single request) to data source by click on the toolbar’s Update button or by externally calling the batchSave method. To enable Batch edit, set the Mode
of EditSettings
as Batch.
@Html.EJS().Grid("BatchEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=3 }).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Cancel edit based on condition in batch mode
You can prevent the CRUD operations of the Batch edit Grid by using condition in the cellEdit
, beforeBatchAdd
and beforeBatchDelete
events for Edit, Add and Delete actions respectively.
In the below demo, we prevent the CRUD operation based on the Role
column value. If the Role Column is Employee
, we are unable to edit/delete that row.
<button onclick="btnClick(event)">Grid is Addable</button>
@Html.EJS().Grid("BatchEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Role").HeaderText("Role").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).CellEdit("cellEdit").BeforeBatchAdd("beforeBatchAdd").BeforeBatchDelete("beforeBatchDelete").AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
var isAddable = true;
function btnClick(args) {
args.target.innerText == 'Grid is Addable' ? (args.target.innerText = 'Grid is Not Addable') : (args.target.innerText = 'Grid is Addable');
isAddable = !isAddable;
}
function cellEdit(args) {
if (args.rowData['Role'] == 'Employee') {
args.cancel = true;
}
}
function beforeBatchAdd(args) {
if (!isAddable) {
args.cancel = true;
}
}
function beforeBatchDelete(args) {
if (args.rowData['Role'] == 'Employee') {
args.cancel = true;
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Confirmation dialog
By default, grid will show the confirm dialog when saving or cancelling or performing any actions like filtering, sorting, etc.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=3 }).Add();
col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
}).AllowPaging().PageSettings(page => page.PageCount(5)).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowConfirmDialog(false).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
ShowConfirmDialog
ofEditSettings
requires theMode
to be Batch.
IfShowConfirmDialog
set to false, then confirmation dialog does not display in batch editing.