GridView for ASP.NET MVC - How to enable or disable the cell edit functionality in batch mode based on a condition
This example demonstrates how to use the check box state to enable or disable the grid's cell edit functionality in batch edit mode.
Follow the steps below:
-
Create the Grid View control and populate it with columns. Set the grid's SettingsEditing.Mode property to
Batch
to enable the batch edit mode. Add a command column and set its ShowNewButtonInHeader and ShowDeleteButton properties totrue
.@Html.DevExpress().GridView(settings => { // ... settings.SettingsEditing.Mode = GridViewEditingMode.Batch; settings.CommandColumn.Visible = true; settings.CommandColumn.ShowNewButtonInHeader = true; settings.CommandColumn.ShowDeleteButton = true; // ... }).Bind(Model).GetHtml()
-
Add a check box and handle its client-side CheckedChanged event. In the handler, get the current state of the check box and assign the state to a flag variable.
@Html.DevExpress().CheckBox(settings => { settings.Name = "AllowEditCB"; settings.Text = "Allow Editing"; settings.Properties.ClientSideEvents.CheckedChanged = "OnAllowEditChanged"; }).GetHtml()
var allowEdit = false; function OnAllowEditChanged(s, e) { allowEdit = s.GetValue(); }
-
Handle the grid's client-side BatchEditStartEditing, BatchEditRowInserting, and BatcshEditRowDeleting events. In the handler, cancel the current edit operation based on the flag variable value.
@Html.DevExpress().GridView(settings => { // ... settings.ClientSideEvents.BatchEditRowDeleting = "OnEditing"; settings.ClientSideEvents.BatchEditRowInserting = "OnEditing"; settings.ClientSideEvents.BatchEditStartEditing = "OnEditing"; })
function OnEditing(s, e) { e.cancel = !allowEdit; }
(you will be redirected to DevExpress.com to submit your response)