ASP.NET WebForms and MVC GridView - Enhancements (v19.1)

The DevExpress ASP.NET GridView (v19.1) ships with a new adaptive toolbar and number of enhancements to the batch editing feature.

Batch Edit Enhancements

Our ASP.NET WebForms and MVC GridView control allows you to edit multiple grid rows on the client side and then send the changes to the server in a single request. We call this feature the 'batch edit' mode.

Endless paging

We've enhanced the 'batch edit' mode with support for 'endless paging' in this release:

If you're not familiar with the 'endless paging' mode, it automatically loads content as you scroll or page down.

To enable this new functionality, set the SettingsPager.Mode property to EndlessPaging:

<SettingsEditing Mode="Batch" /> <SettingsPager Mode="EndlessPaging" />

New styles for Command Buttons

The DevExpress GridView for ASP.NET WebForms and MVC ships with three new render styles for the command buttons in batch edit mode:

• Outline (default)
• Secondary
• Danger

By default, the command buttons will use the Outline style:

Use the SettingsCommandButton.RenderMode option to change the command button style individually or as a collection:

<SettingsCommandButton RenderMode="Secondary"><DeleteButton RenderMode="Danger" /></SettingsCommandButton>

Adaptive toolbar

DevExpress ASP.NET WebForms and MVC GridView toolbars now support adaptive layouts.

The toolbar can automatically resize, hide its items' text and display only icons when the browser window is resized:

Demo

To enable, set the EnableCollapseRootItemsToIcons property to true:

<dx:GridViewToolbar><SettingsAdaptivity Enabled="true"
    EnableCollapseRootItemsToIcons="true" />

You can also target specific browsers by setting a 'responsive breakpoint'. For example, use the CollapseRootItemsToIconsAtWindowInnerWidth property to set a specific width breakpoint:

<dx:GridViewToolbar><SettingsAdaptivity Enabled="true"
    EnableCollapseRootItemsToIcons="true"
    CollapseRootItemsToIconsAtWindowInnerWidth="600" />

If the target screens are small, you can also hide items in a side-menu panel:

<dx:GridViewToolbar><SettingsAdaptivity Enabled="true" EnableAutoHideRootItems="true"
      EnableCollapseToSideMenu="true"
      CollapseToSideMenuAtWindowInnerWidth="300"
      EnableCollapseRootItemsToIcons="true"
      CollapseRootItemsToIconsAtWindowInnerWidth="700" />

Each item's adaptive priority is also configurable.

Callback name via EndCallback event

The ASP.NET GridView's EndCallback event introduces the command name parameter in v19.1. You can now identify the operation type that has just resulted in a callback and take appropriate actions.

function OnEndCallback(s, e) {
    if (e.command == "ADDNEWROW") {
        s.Refresh();
    }
}

What Do You Think?

As always, we are interested in your feedback. Please feel free to leave comments below or open Support Center tickets as required.