The DevExpress ASP.NET Bootstrap GridView (v19.1) ships with a new adaptive toolbar and several enhancements to the batch editing feature.
Batch Edit Enhancements
Our ASP.NET Bootstrap 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.
Callback Support
The Batch Edit feature of the DevExpress ASP.NET Bootstrap GridView is a fantastic time-saving feature.
Essentially, Batch Edit mode allows you to modify a batch of grid data on the client side and to send it to the server in a single request. In this mode, the GridView maintains all user changes on the client side until the user saves or discards them.
Unfortunately, the Batch Edit mode was limited because it would only work for the page you were currently on. It did not allow you to page, sort, group, or perform any callback-based operation until you accepted or canceled those original changes.
Good news, we've solved this callback-based limitation. We're also introducing a new Batch Edit preview dialog.
Preview Batch Changes
Let's start with the new feature: inserted, edited, and deleted edits can now be previewed and modified before data is saved in the Batch Edit mode. Take a look:
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:
<SettingsPager Mode="EndlessPaging" />
New styles for Command Buttons
The DevExpress ASP.NET Bootstrap GridView 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" /><CancelButton RenderMode="Danger" /><UpdateButton RenderMode="Danger" />
Callback name via EndCallback event
Our ASP.NET Bootstrap 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.
Adaptive toolbar
The DevExpress ASP.NET Bootstrap 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:
The BootstrapGridViewToolbar object allows you to add adaptive toolbars to different Grid View parts (inside the grid’s header/footer, outside the Panel element).
Toolbar Position
The following table lists the properties that control the toolbar's position:
| Position = Top | Position = Bottom | |
|---|---|---|
| ShowInsidePanel = true | The toolbar is displayed in the PanelHeader (<div class="card-header">...</div>) | The toolbar is displayed in the PanelFooter (<div class="card-footer">...</div>) |
| ShowInsidePanel = false | The toolbar is displayed above the Panel element (<div class="card">...</div>) | The toolbar is displayed below the Panel element (<div class="card">...</div>) |
Toolbar Adaptivity
The following properties control how the toolbar responds when the container’s width changes:
SettingsAdaptivity.EnableCollapseRootItemsToIcons- If true, the text of all items that contain icons are hidden. You can also use the item'sBootstrapGridViewToolbarItem.AdaptivePriorityproperty to specify the order in which items are hidden.SettingsAdaptivity.EnableAutoHideRootItems- If true, the toolbar combines root items one by one in the root submenu until the toolbar contains the minimum number of root items (specified in theSettingsAdaptivity.MinRootItemsCountproperty).
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.