Grid View for ASP.NET MVC - How to implement custom buttons in the status bar in batch edit mode

This example demonstrates how to implement a status bar template to replace default command buttons with custom buttons when the grid is in batch edit mode.

Custom Buttons

Overview

Follow the steps below:

Call the grid's SetStatusBarTemplateContent method, add custom command buttons to the template, and handle their Click events.

C#
settings.Styles.StatusBar.CssClass = "StatusBarWithButtons";  
settings.SetStatusBarTemplateContent(c => {  
    Html.DevExpress().Button(button => {  
        button.Name = "btnPrevChanges";  
        button.Text = "Preview changes";  
        button.ClientSideEvents.Click = "OnPreviewChangesClick";  
        // ...  
    }).Render();  
  
    Html.DevExpress().Button(button => {  
        button.Name = "btnSave";  
        button.Text = "Save changes";  
        button.ClientSideEvents.Click = "function(s, e){ GridView.UpdateEdit(); }";  
        // ...  
    }).Render();  
  
    @Html.DevExpress().Button(button => {  
        button.Name = "btnCancel";  
        button.Text = "Cancel changes";  
        button.ClientSideEvents.Click = "function(s, e){ GridView.CancelEdit(); SetButtonsVisibility(GridView); }";  
        ...  
    }).Render();  
});

JavaScript
function OnPreviewChangesClick(s, e) {  
    if (isPreviewChangesVisible) {  
        s.SetText("Show changes");  
        GridView.batchEditApi.HideChangesPreview();  
    }  
    else {  
        s.SetText("Hide preview");  
        GridView.batchEditApi.ShowChangesPreview();  
    }  
    isPreviewChangesVisible = !isPreviewChangesVisible;  
}  
function OnCustomButtonClick(s, e) {  
    if (e.buttonID == "deleteButton") {  
        s.DeleteRow(e.visibleIndex);  
        SetButtonsVisibility(s);  
    }  
}

Handle the grid's BatchEditEndEditing event to change the custom button visibility. In this example, custom buttons imitate the behavior of default buttons:

The buttons are hidden when the grid has no changes.
The Preview changes button changes its text to Hide preview when clicked.

JavaScript
function OnBatchEditEndEditing(s, e) {  
    window.setTimeout(function () { SetButtonsVisibility(s); }, 0);  
}  
function SetButtonsVisibility(s) {  
    var statusBar = s.GetMainElement().getElementsByClassName("StatusBarWithButtons")[0].getElementsByTagName("td")[0];  
    if (!s.batchEditApi.HasChanges())  
        statusBar.style.visibility = "hidden";  
    else  
        statusBar.style.visibility = "visible";  
}

Files to Review

_GridViewPartial.cshtml (VB: _GridViewPartial.vbhtml)
Index.cshtml (VB: Index.vbhtml)

Documentation

Batch Edit Mode

More Examples

Example Code

T150411/Views/Home/_GridViewPartial.cshtml

Razor
@{
    var grid = Html.DevExpress().GridView(settings =>
    {
        settings.Name = "GridView";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
        settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "BatchUpdatePartial" };
        settings.SettingsEditing.Mode = GridViewEditingMode.Batch;

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

        GridViewCommandColumnCustomButton customButton = new GridViewCommandColumnCustomButton();
        customButton.Text = "Delete";
        customButton.ID = "deleteButton";
        settings.CommandColumn.CustomButtons.Add(customButton);

        settings.KeyFieldName = "ID";

        settings.Columns.Add("C1");
        settings.Columns.Add(column =>
        {
            column.FieldName = "C2";
            column.ColumnType = MVCxGridViewColumnType.SpinEdit;
        });
        settings.Columns.Add("C3");
        settings.Columns.Add(column =>
        {
            column.FieldName = "C4";
            column.ColumnType = MVCxGridViewColumnType.CheckBox;
        });
        settings.Columns.Add(column =>
        {
            column.FieldName = "C5";
            column.ColumnType = MVCxGridViewColumnType.DateEdit;
        });
        settings.CellEditorInitialize = (s, e) =>
        {
            ASPxEdit editor = (ASPxEdit)e.Editor;
            editor.ValidationSettings.Display = Display.Dynamic;
        };

        settings.Styles.StatusBar.CssClass = "StatusBarWithButtons";
        settings.SetStatusBarTemplateContent(c =>
        {
            ViewContext.Writer.Write("<div style='text-align: right'>");

            Html.DevExpress().Button(button =>
            {
                button.Name = "btnPrevChanges";
                button.RenderMode = ButtonRenderMode.Outline;
                button.Text = "Preview changes";
                button.UseSubmitBehavior = false;
                button.ClientSideEvents.Click = "OnPreviewChangesClick";
            }).Render();

            Html.DevExpress().Button(button =>
            {
                button.Name = "btnSave";
                button.RenderMode = ButtonRenderMode.Outline;
                button.Text = "Save changes";
                button.UseSubmitBehavior = false;
                button.ClientSideEvents.Click = "function(s, e){ GridView.UpdateEdit(); }";
            }).Render();

            @Html.DevExpress().Button(button =>
            {
                button.Name = "btnCancel";
                button.RenderMode = ButtonRenderMode.Outline;
                button.Text = "Cancel changes";
                button.UseSubmitBehavior = false;
                button.ClientSideEvents.Click = "function(s, e){ GridView.CancelEdit(); SetButtonsVisibility(GridView); }";
            }).Render();

            ViewContext.Writer.Write("</div>");
        });
        settings.ClientSideEvents.Init = "function(s, e){ SetButtonsVisibility(s); }";
        settings.ClientSideEvents.EndCallback = "function(s, e){ SetButtonsVisibility(s) }";
        settings.ClientSideEvents.BatchEditEndEditing = "OnBatchEditEndEditing";
        settings.ClientSideEvents.CustomButtonClick = "OnCustomButtonClick";
    });
}
@grid.Bind(Model).GetHtml()

T150411/Views/Home/_GridViewPartial.vbhtml

Code
@Code
    Dim grid = Html.DevExpress().GridView(Sub(settings)
                                              settings.Name = "GridView"
                                              settings.CallbackRouteValues = New With {Key .Controller = "Home", Key .Action = "GridViewPartial"}
                                              settings.SettingsEditing.BatchUpdateRouteValues = New With {Key .Controller = "Home", Key .Action = "BatchUpdatePartial"}
                                              settings.SettingsEditing.Mode = GridViewEditingMode.Batch

                                              settings.CommandColumn.Visible = True
                                              settings.CommandColumn.ShowNewButtonInHeader = True
                                              Dim customButton As New GridViewCommandColumnCustomButton()
                                              customButton.Text = "Delete"
                                              customButton.ID = "deleteButton"
                                              settings.CommandColumn.CustomButtons.Add(customButton)

                                              settings.KeyFieldName = "ID"

                                              settings.Columns.Add("C1")
                                              settings.Columns.Add(Sub(column)
                                                                       column.FieldName = "C2"
                                                                       column.ColumnType = MVCxGridViewColumnType.SpinEdit
                                                                   End Sub)
                                              settings.Columns.Add("C3")
                                              settings.Columns.Add(Sub(column)
                                                                       column.FieldName = "C4"
                                                                       column.ColumnType = MVCxGridViewColumnType.CheckBox
                                                                   End Sub)
                                              settings.Columns.Add(Sub(column)
                                                                       column.FieldName = "C5"
                                                                       column.ColumnType = MVCxGridViewColumnType.DateEdit
                                                                   End Sub)
                                              settings.CellEditorInitialize = Sub(s, e)
                                                                                  Dim editor As ASPxEdit = CType(e.Editor, ASPxEdit)
                                                                                  editor.ValidationSettings.Display = Display.Dynamic
                                                                              End Sub

                                              settings.Styles.StatusBar.CssClass = "StatusBarWithButtons"
                                              settings.SetStatusBarTemplateContent(Sub(c)
                                                                                       ViewContext.Writer.Write("<div style='text-align: right'>")
                                                                                       Html.DevExpress().Button(Sub(button)
                                                                                                                    button.Name = "btnPrevChanges"
                                                                                                                    button.RenderMode = ButtonRenderMode.Outline
                                                                                                                    button.Text = "Preview changes"
                                                                                                                    button.UseSubmitBehavior = False
                                                                                                                    button.ClientSideEvents.Click = "OnPreviewChangesClick"
                                                                                                                End Sub).Render()
                                                                                       Html.DevExpress().Button(Sub(button)
                                                                                                                    button.Name = "btnSave"
                                                                                                                    button.RenderMode = ButtonRenderMode.Outline
                                                                                                                    button.Text = "Save changes"
                                                                                                                    button.UseSubmitBehavior = False
                                                                                                                    button.ClientSideEvents.Click = "function(s, e){ GridView.UpdateEdit(); }"
                                                                                                                End Sub).Render()
                                                                                       Html.DevExpress().Button(Sub(button)
                                                                                                                    button.Name = "btnCancel"
                                                                                                                    button.RenderMode = ButtonRenderMode.Outline
                                                                                                                    button.Text = "Cancel changes"
                                                                                                                    button.UseSubmitBehavior = False
                                                                                                                    button.ClientSideEvents.Click = "function(s, e){ GridView.CancelEdit(); SetButtonsVisibility(GridView); }"
                                                                                                                End Sub).Render()
                                                                                       ViewContext.Writer.Write("</div>")
                                                                                   End Sub)
                                              settings.ClientSideEvents.Init = "function(s, e){ SetButtonsVisibility(s); }"
                                              settings.ClientSideEvents.EndCallback = "function(s, e){ SetButtonsVisibility(s) }"
                                              settings.ClientSideEvents.BatchEditEndEditing = "OnBatchEditEndEditing"
                                              settings.ClientSideEvents.CustomButtonClick = "OnCustomButtonClick"
                                          End Sub)
End Code
@grid.Bind(Model).GetHtml()

T150411/Views/Home/Index.cshtml

Razor
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    var isPreviewChangesVisible = false;
    function SetButtonsVisibility(s) {
        var statusBar = s.GetMainElement().getElementsByClassName("StatusBarWithButtons")[0].getElementsByTagName("td")[0];
        if (!s.batchEditApi.HasChanges())
            statusBar.style.visibility = "hidden";
        else
            statusBar.style.visibility = "visible";
    }

    function OnPreviewChangesClick(s, e) {
        if (isPreviewChangesVisible) {
            s.SetText("Show changes");
            GridView.batchEditApi.HideChangesPreview();
        }
        else {
            s.SetText("Hide preview");
            GridView.batchEditApi.ShowChangesPreview();
        }
        isPreviewChangesVisible = !isPreviewChangesVisible;
    }

    function OnCustomButtonClick(s, e) {
        if (e.buttonID == "deleteButton") {
            s.DeleteRow(e.visibleIndex);
            SetButtonsVisibility(s);
        }
    }
    function OnBatchEditEndEditing(s, e) {
        window.setTimeout(function () { SetButtonsVisibility(s); }, 0);
    }
</script>


@using (Html.BeginForm())
{
    Html.RenderAction("GridViewPartial");
}

T150411/Views/Home/Index.vbhtml

Code
@Code
    ViewData("Title") = "Home Page"
End Code

<script type="text/javascript">
    var isPreviewChangesVisible = false;
    function SetButtonsVisibility(s) {
        var statusBar = s.GetMainElement().getElementsByClassName("StatusBarWithButtons")[0].getElementsByTagName("td")[0];
        if (!s.batchEditApi.HasChanges())
            statusBar.style.visibility = "hidden";
        else
            statusBar.style.visibility = "visible";
    }

    function OnPreviewChangesClick(s, e) {
        if (isPreviewChangesVisible) {
            s.SetText("Show changes");
            GridView.batchEditApi.HideChangesPreview();
        }
        else {
            s.SetText("Hide preview");
            GridView.batchEditApi.ShowChangesPreview();
        }
        isPreviewChangesVisible = !isPreviewChangesVisible;
    }

    function OnCustomButtonClick(s, e) {
        if (e.buttonID == "deleteButton") {
            s.DeleteRow(e.visibleIndex);
            SetButtonsVisibility(s);
        }
    }
    function OnBatchEditEndEditing(s, e) {
        window.setTimeout(function () { SetButtonsVisibility(s); }, 0);
    }
</script>

@Using Html.BeginForm()
    Html.RenderAction("GridViewPartial")
End Using

DevExpress Support Team

last modified 2 years ago

Modified: March 22, 2023 8:45 AM

Platform: ASP.NET MVC

Product: MVC GridView

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.