Blazor UI Components - An Update with New Controls & Features, and Blazor Reports! (available in v20.1)

ASP.NET Team Blog
09 June 2020

We just updated our UI controls for Blazor with official support for the latest version of Blazor WebAssembly. This release also includes two new UI components, a number of new features, and DevExpress Reports for Blazor.

Blazor WebAssembly 3.2.0 support

I'm thrilled to announce that Blazor WebAssembly is now officially released. This is a fully-featured and supported release of Blazor WebAssembly that is ready for production use. Full stack web development with .NET is now here! - Dan Roth, Blazor PM

As you know, Microsoft has officially released both server and client hosting models for the Blazor framework. Our most recent release (v20.1) supports Microsoft’s latest releases: .NET Core 3.1.4 and the Blazor Web Assembly 3.2.0.

Download

To get started with v20.1 today, use the DevExpress NuGet server.

New Reports for Blazor

If you currently own a DevExpress Reports Subscription, you’ll have access to our new Blazor Reporting platform. This Suite includes a Visual Studio Report Designer, a Blazor Report Viewer and a rich set of integrated report elements (tables, shapes, fields, etc).

Blog post | Demo | Documentation

New Adaptive Toolbar

v20.1 ships with a new Command Toolbar component for Blazor. This component allows you to add a lightweight adaptive toolbar to your Blazor apps:

DevExpress Blazor Toolbar

You can create and incorporate the following commands types within your Blazor apps:

  • Button
  • Drop-down list
  • Radio button
  • Check button
  • Link button

Each button can include an icon, text, or both. Use the DxToolbarItem.Template property to create a custom toolbar item as needs dictate. You can also divide toolbar items into groups.

Our Blazor Toolbar component automatically adapts size for desktop and mobile browsers. When the toolbar cannot fit into its container, the control hides text for items with an icon or moves root items one by one to a root submenu (until the toolbar contains the appropriate number of root items).

Demo | Documentation

New Context Menu

Our new Context or popup menu can display both a single or multi-level context menu.

DevExpress Blazor Context Menu

The Context Menu can organize and display items from a hierarchical structure or from a standard list. You can bind the menu to a data source and populate the item collection at runtime. You can also create custom context menu items directly within your Razor markup.

We've added a menu items API to set properties such as Text and Icon, start a new group, and more.

Use the Show(x, y) method to specify the location wherein the context menu is to be displayed. Call the Show method from either the onClick or onContextMenu Blazor mouse events.

Demo | Documentation

Data Grid

Command Toolbar

Include custom tool buttons in your Blazor Grid by integrating our new Toolbar component. Use the Grid's HeaderTemplate to add toolbars:

Blazor data grid command toolbar

Demo | Documentation

Column Chooser

Our Blazor Data Grid allows you to customize visible columns via its runtime Column Chooser (Column Selector).

Users can reorder columns by dragging icons next to column headers. They can also hide or display columns using checkboxes:

Blazor-data-grid-change-column-visibility-using-column-chooser

To enable, add the DxDataGridColumnChooserToolbarItem to the grid toolbar's markup.

The Column Chooser is mobile-friendly. On mobile devices it adapts automatically and displays a panel:

Blazor-data-grid-adaptive-column-chooser-for-mobile

Demo | Documentation

Control Display Size

The majority of DevExpress Blazor Editor components now support three size options: Small , Medium , and Large.

Blazor-editors-small-medium-large-size-mode

Some components, like our Data Grid, are more complex than others (i.e. Button). To accommodate these differences, we introduced the following three SizeMode properties:

  • SizeMode - used for simple components, such as our Data Editors, Buttons, and Pager.
  • InnerComponentSizeMode - used for the Data Grid and Scheduler. Changes the size of internal UI elements.
  • ItemSizeMode - used for our Form Layout and Toolbar. Resizes items.

You can also use the DevExpress global option to modify size mode for the entire Blazor app.

Important note : In v20.1, we changed the default size of all editors to small. If you prefer a different size, simply use the properties listed above.

Documentation

Data Editors

Display Format Support

Our Text Box, Spin Edit, ComboBox and Date Edit components now support the DisplayFormat property. This allows you to display formatted values (based on conditional formatting rules) that differ from underlying field values. For example, you can display currency values for a field with float values. This property only changes how the value is displayed at runtime and does not affect the underlying value.

Use the new DisplayFormat property to specify a format pattern with standard format strings.

Blazor-data-editors-custom-display-format

Demo | Documentation

Specify when Values Update

When the Text Box and Spin Edit components are bound to a property or field, associated values are only updated when the editor loses focus. With this release, we added a new BindValueMode property to our Text Box and Spin Edit components.

Set the BindValueMode property to either:

  • OnLostFocus - Editor value is updated after the editor loses focus.
  • OnInput - Editor value is updated when input values change.

To update editor values immediately after user input changes, set this property to OnInput.

Note: each Blazor editor supports a default onInput event. Override this event to execute custom code when a user enters a new value within an editor.

Demo | Documentation

Input HTML attributes

Many of our Blazor editor components are built with the standard HTML input element. With this release, we've added the ability to assign HTML attributes. Our Text Box, ComboBox, Spin Edit, Date Edit, and TagBox now support the following attributes:

The Text Box, Spin Edit, and Date Edit also support the following attributes:

To apply these attributes, specify them directly in Razor markup:

<DxTextBox name="abc" tabindex="1" autocomplete="on" />

Documentation

Drop-down Window Direction

Our Blazor ComboBox, TagBox, and Date Edit components display a drop-down window below a standard text field. However, if one of these editors was located at the bottom of a page, then the drop-down window portion can be cut off.

With this release, our Blazor ComboBox, TagBox, and Date Edit will automatically open a window above or below their text field (based on available space).

Blazor-dropdown-window-above-text-box

Use the DropDownDirection property to manually define direction as Up or Down.

Documentation

CheckBox

Content Alignment

Use the new CheckBox Alignment property to align a check mark and text relative to one another.

Blazor-checkbox-left-right-center-alignment

Demo | Documentation

Spin Edit

Custom Increment Value

Use our Blazor Spin Edit's new Increment property to set custom increment values, including decimals:

Blazor-spin-edit-custom-increment-decrement-value

Demo | Documentation

Charts

Resolve Label Overlap

If chart series contain multiple points, point labels can overlap. With this release, we introduced a LabelOverlap property. Use it to specify how the chart should process overlapping labels.

Blazor-chart-labels-hide-stackled-overlap

Demo | Documentation

Series API Enhancement

We added a VisibleChanged event to the chart series object. The event fires when a user changes series visibility (for example, by toggling checkboxes near the series title in the legend). You can also implement two-way binding for the DxChartSeries.Visible property.

Documentation

XAF's Blazor UI & Example with Security System APIs

For our XAF customers, the team will soon update the online XAF Blazor demo based on the release version of our Blazor components. It will include bug fixes and improved data validation support.

Even if you do not plan to use XAF's UI, you may find this new non-XAF Blazor Server demo and tutorial helpful. It demonstrates how to use DevExpress Blazor components with XAF's non-visual APIs for user authentication and group authorization.

For more information on our business application framework for .NET developers, please follow the XAF Team blog.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
15 comment(s)
Gordon Smith 3
Gordon Smith 3

Great news - starting to look like a very good product now.

Now that a first official release has come, will you go back to monthly(ish) releases?

9 June 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
Thanks @Gordon Smith 3, I appreciate your support.
Now that we've released and support both Blazor hosting models, we plan to integrate the DevExpress UI for Blazor with the main DevExpress Unified Installer. Once integrated, the release schedule will sync with the main DevExpress release schedule. You may find this link useful: Current Version/Build - Shipping Technologies
9 June 2020
Gordon Smith 3
Gordon Smith 3
Thanks Mehul - what does that mean for the roadmap features that didn't make this cut - grid inline editing and filemanager in particular?  Are these now moved to the second half of the year and v20.2?
9 June 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
@Gordon, let's discuss this over email please: mharry@devexpress.com Thanks.
9 June 2020
Anurag Mahato
Anurag Mahato

What about Roadmap 20.2 ?


9 June 2020
CRM-0a346ad9-6ad2-4217-b331-35de4d590aaa
Customer126306
Thanks for the update, +1 for the "blazor" roadmap..
9 June 2020
Eli Smadar
Eli Smadar
When will you support RTL?
10 June 2020
CRM-0a86f1f8-31fe-400b-9132-e1975ea0744b
Customer132260
we want datagrid freeze columns support
11 June 2020
Anurag Mahato
Anurag Mahato
No reply about roadmap
12 June 2020
Mark Harby
Mark Harby

Are these updated and new components available with the Free-for-Life license ?


13 June 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
@Mark Harby,
If you obtained a specific build from our website and that build was made available free of charge, you can use that build for the rest of your life without cost. For instance, if we make a free offer for version 1.1.1, and you followed our registration procedures, then you have a license for v1.1.1 for the rest of your life. When we release v2, we may offer it for free or it may require a paid upgrade.
15 June 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
For those who asked, yes, another Blazor roadmap update will be published, stay tuned to this blog.
16 June 2020
Andrei Iorga
Andrei Iorga

So what about blazor webassembly now? Wil this be used in Xaf Blazor ? 


17 June 2020
Dennis (DevExpress)
Dennis (DevExpress)

@Andrei Iorga: XAF team is focused on Blazor Server in 2020. We postponed decisions related to Blazor WebAssembly support until it is officially marked as final (LTS) by Microsoft (likely in .NET 5 or later). For more information, please see our 2020 roadmap. 

17 June 2020
CRM-734ed765-428d-45e6-bf8d-041fc66d3d88
Customer137726

Hi,

Does it support RTL?

Thanks 

21 June 2020

Please login or register to post comments.