GridView - Batch Editing - How to conditionally enable and disable the editing on the client side

This example demonstrates how to conditionally enable or disable the editing on the client side.

1) Define a JavaScript variable that will control the edit state of the grid. This variable can be changed by your code or by other means. In this example, it is controlled by a check box:

[C#]
@Html.DevExpress().CheckBox(settings=>{settings.Name="AllowEditCB";settings.Properties.ClientSideEvents.CheckedChanged="OnAllowEditChanged";}).GetHtml()

[JScript]
function OnAllowEditChanged(s, e){
    allowEdit = s.GetValue();}

2) Handle the grid's client-side BatchEditStartEditing event to cancel the edit operation based on the value of the mentioned variable:

[JScript]
function OnStartEditing(s, e){
    e.cancel = !allowEdit;}

[C#]
settings.CommandColumn.Visible=true;settings.CommandColumn.SetHeaderTemplateContent(c=>{Html.DevExpress().Button(btnSettings=>{btnSettings.Name="addNewBtn";btnSettings.Text="New";btnSettings.RenderMode=ButtonRenderMode.Link;btnSettings.ClientSideEvents.Click="OnHeaderNewClick";}).Render();});settings.CommandColumn.CustomButtons.Add(newGridViewCommandColumnCustomButton(){ID="btnDelete",Text="Delete"});

[JScript]
function OnHeaderNewClick(s, e){if(allowEdit)
        grid.AddNewRow();}function OnCustomButtonClick(s, e){if(e.buttonID == "btnDelete"&& allowEdit)
        grid.DeleteRow(e.visibleIndex);}

See also:
ASPxGridView - Batch Editing - How to conditionally enable and disable the editing on the client side