ASPxGridView - 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:

[ASPx]
<dx:ASPxCheckBoxID="ASPxCheckBox1"runat="server"Text="Allow edit"><ClientSideEventsCheckedChanged="OnAllowEditChanged"/></dx:ASPxCheckBox>

[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;}

[ASPx]
<dx:GridViewCommandColumn><HeaderTemplate><dx:ASPxButtonID="ASPxButton1"runat="server"Text="New"AutoPostBack="false"RenderMode="Link"><ClientSideEventsClick="OnHeaderNewClick"/></dx:ASPxButton></HeaderTemplate><CustomButtons><dx:GridViewCommandColumnCustomButtonID="btnDelete"Text="Delete"></dx:GridViewCommandColumnCustomButton></CustomButtons></dx:GridViewCommandColumn>

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

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