Quantcast
Channel: ASP.NET Team Blog
Viewing all articles
Browse latest Browse all 372

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

$
0
0

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 and update multiple grid rows on the client side and send them 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:

DevExpress ASP.NET GridView - Batch Edit and Endless Paging

If you're not familiar, the 'endless paging' mode 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 new three new render styles for the command buttons in batch edit mode:

  • Danger
  • Outline (default)
  • Secondary

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

DevExpress ASP.NET GridView - New styles for Command Buttons in Batch Edit

Use the SettingsCommandButton.RenderMode option to change the command buttons style:

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

DevExpress ASP.NET GridView - New Adaptive Toolbar

Demo

To enable, set the EnableCollapseRootItemsToIcons property to true:

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

If the window has a specific width, then use the CollapseRootItemsToIconsAtWindowInnerWidth property:

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

Or 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

v19.1 includes an upgrade to the ASP.NET GridView's EndCallback event. Use the EndCallback event to get the command name after a callback has completed:

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.


Viewing all articles
Browse latest Browse all 372

Latest Images

Trending Articles



Latest Images