As many of you already know from our previous posts, our next major Blazor component update (v22.2) will ship with a new rendering engine (replacing Bootstrap). The purpose of this post is to document the changes you can expect, how to prepare for the changes, and how these changes will benefit those of you targeting the Blazor platform going forward.
New Size Modes
Thanks to our new rendering engine, v22.2 we will significantly improve the capabilities of existing Blazor Size Modes:
- Blazor Components (regardless of size mode used) will be downsized to cater for "dense" interfaces and display more relevant information on screen. Our new Large Size Mode will mirror what we now call “Medium.” Our new Medium mode will be closer to what we now call “Small.” And our new Small mode will allow you to deliver interfaces similar to desktop apps such as Microsoft Outlook.
- New size modes will apply to our Blazor Data Grid (DxGrid), Tabs, Flyout, and other UI components that did not support size modes previously.
- Size modes will offer a more consistent user experience and will affect all spacings/sizes across supported Blazor components. For example, our Blazor Form Layout component will adjust paddings between items/groups based on selected size mode.
New Visual Features
Apart from enhanced size modes, our new Blazor rendering mechanism will introduce new visual features for the DevExpress Blazor Grid and Data Editors library.
Blazor Data Editors — Built-in Validation UI
Our Blazor Data Editors (when used standalone or within data grid cells) can optionally display icons and tooltips indicating associated validation state.
Blazor Grid — In-place Editor Appearance
The DevExpress Grid will have the option to integrate data editors into its cells so that the editor and its cell share the same border.
Blazor Grid — Support for Fixed and Relative Height
The DevExpress Grid will support usage scenarios where height is either fixed or set as a percentage of its parent container height / viewport height. In such instances, the footer element will remain at the bottom regardless of the rows displayed within the Grid.
Support for Bootstrap v5.2
Since our new rendering engine does not rely on Bootstrap, your DevExpress UI will look consistent regardless of the Bootstrap version referenced by your app. We will also make certain that Blazor UI components that have not been ported to our new rendering engine correctly follow Bootstrap v5.2 guidelines.
Affected Components
Changes in rendering will directly affect the following components.
Major components:
- DxGrid
- DxScheduler (inner elements such as editors and buttons)
- DxRichEdit (toolbar elements and context menus)
Data Editors:
- DxCalendar
- DxCheckBox
- DxComboBox
- DxDateEdit
- DxListBox
- DxMaskedInput
- DxMemo
- DxSpinEdit
- DxTagBox
- DxTextBox
- DxTimeEdit
Layout:
- DxTabs
- DxFormLayout
- DxPopup
- DxDropDown
- DxFlyout
Navigation:
- DxPager
- DxToolbar
- DxAccordion
- DxContextMenu
Blazor components not listed above will continue to use our current Bootstrap rendering engine. As you might expect, you can continue to use these components as you did previously.
Changes to Built-In Blazor Themes
If your Blazor app uses one of our built-in Blazor themes (Blazing Berry, Blazing Dark, Office White, Purple) without customizations, you can expect a smooth automatic migration path. In such instances, v22.2 will only adjust sizes, spacings, and introduce minor visual tweaks.
Changes to Bootstrap-Based Themes
Our new rendering engine will use CSS variables (colors, fonts) from Bootstrap-based themes. Other theme settings and CSS styles will be ignored.
The impact of this change depends on which Bootstrap theme your Blazor app uses, since some themes lean more heavily on individual CSS styles than others. Also, many DevExpress controls (such as DxGrid) ignored specific Bootstrap theme settings to achieve their own appearance prior to v22.2.
If you are using the standard Bootstrap theme that comes with default Blazor templates, you can expect minimal changes to sizes, paddings, and colors:
Other Bootstrap-based themes will experience more drastic changes. The images below demonstrate a couple of examples from the Bootswatch theme library.
Changes to Custom Code
The new rendering engine completely overhauls the internal visual structure of DevExpress Blazor components:
- DevExpress CSS classes will use the ".dxbl" prefix instead of ".dxbs" to avoid conflicts with previous styles.
- Many DevExpress CSS classes will be removed with no direct alternative in the new rendering engine.
- The internal element structure of many DevExpress components will be reworked and simplified.
Any application code that relies on the internal structure instead of public API may stop working. Here are a few examples of things to look for.
A CSS selector that references internal DevExpress CSS class names.
.dxbs-grid-header-row {
display: none;
}
HTML elements that use internal DevExpress CSS classes.
<DxButton CssClass="dxbs-edit-btn dxbs-clickable" RenderStyle="ButtonRenderStyle.Secondary" Click="@OnEditButtonClick">
<span class="dropdown-toggle dxbs-dropdown-toggle dxbs-spin-edit-toggle" aria-hidden="true"></span>
</DxButton>A CSS selector that looks for internal DevExpress elements based on their position in the element tree.
.my-toolbar > .btn-toolbar > div:nth-last-of-type(2) {
display: none;
flex: none;
}
Code that changes the value of a DevExpress CSS variable.
.dxbs-grid-table {
--dx-grid-selection-color: blue;
}
In addition, custom themes based on DevExpress built-in themes (Blazing Berry, Blazing Dark, Office White, Purple) will need to be updated manually. This can be done by applying the same changes to new versions of built-in themes or by comparing new versions to old versions and customized versions using three-way merge tools such as KDiff3.
Your Feedback Matters
If you have questions about this change, need personal assistance, or want to be the first to try the new rendering engine beta, feel free to contact us via the DevExpress Support Center.
We’d also love to hear your thoughts on this upcoming change: