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.

Overview

Follow the steps below:

1. 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 to true.

   Razor
   @Html.DevExpress().GridView(settings => {  
       // ...  
       settings.SettingsEditing.Mode = GridViewEditingMode.Batch;  
       settings.CommandColumn.Visible = true;  
       settings.CommandColumn.ShowNewButtonInHeader = true;  
       settings.CommandColumn.ShowDeleteButton = true;  
       // ...  
   }).Bind(Model).GetHtml()  
   

2. 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.

   Razor
   @Html.DevExpress().CheckBox(settings => {  
       settings.Name = "AllowEditCB";  
       settings.Text = "Allow Editing";  
       settings.Properties.ClientSideEvents.CheckedChanged = "OnAllowEditChanged";  
   }).GetHtml()  
   

   JavaScript
   var allowEdit = false;  
   function OnAllowEditChanged(s, e) {  
       allowEdit = s.GetValue();  
   }  
   

3. 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.

   Razor
   @Html.DevExpress().GridView(settings => {  
       // ...  
       settings.ClientSideEvents.BatchEditRowDeleting = "OnEditing";  
       settings.ClientSideEvents.BatchEditRowInserting = "OnEditing";  
       settings.ClientSideEvents.BatchEditStartEditing = "OnEditing";  
   })  
   

   JavaScript
   function OnEditing(s, e) {  
       e.cancel = !allowEdit;  
   }  
   

Files to Review

• GridViewPartial.cshtml
• Index.cshtml

Documentation

• Batch Edit

More Examples

• Grid View for ASP.NET Web Forms - How to enable or disable the cell edit functionality in batch mode based on a condition

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

Razor
@Html.DevExpress().GridView(settings =>
{
    settings.Name = "gridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };

    settings.KeyFieldName = "ID";
    settings.SettingsEditing.Mode = GridViewEditingMode.Batch;

    settings.CommandColumn.Visible = true;
    settings.CommandColumn.ShowNewButtonInHeader = true;
    settings.CommandColumn.ShowDeleteButton = true;

    settings.Columns.Add("ID", MVCxGridViewColumnType.TextBox);
    settings.Columns.Add("Text", MVCxGridViewColumnType.TextBox);
    settings.Columns.Add("Checked", MVCxGridViewColumnType.CheckBox);

    settings.CellEditorInitialize += (s, e) =>
    {
        e.Editor.ReadOnly = false;
        (e.Editor as ASPxEdit).ValidationSettings.Display = Display.Dynamic;
    };
    settings.ClientSideEvents.BatchEditRowDeleting = "OnEditing";
    settings.ClientSideEvents.BatchEditRowInserting = "OnEditing";
    settings.ClientSideEvents.BatchEditStartEditing = "OnEditing";
  
}).Bind(Model).GetHtml()

Razor
<script type="text/javascript">
    var allowEdit = false;
    function OnEditing(s, e) {
        e.cancel = !allowEdit;
    }   
    function OnAllowEditChanged(s, e) {
        allowEdit = s.GetValue();
    }
</script>

@Html.DevExpress().CheckBox(settings => {
    settings.Name = "AllowEditCB";
    settings.Text = "Allow Editing";
    settings.Properties.ClientSideEvents.CheckedChanged = "OnAllowEditChanged";
}).GetHtml()

@Html.Action("GridViewPartial")