Blazor UI – New DropDown component, Grid, Rich Text Edit, Reporting and Tabs enhancements (EAP v21.2)

ASP.NET Team Blog
13 September 2021

Our next major product release is a couple of months away. This post details some the Blazor-related features included in our first Early Access Preview (EAP) and a summary of additional features we expect to ship in November. As always, we welcome your thoughts and feedback.

If you own an active DevExpress Universal or DXperience Subscription, and would like to learn more about our Blazor product line or are ready to explore the features described herein, point your browser to the DevExpress Download Manager and download our EAP build at your convenience. You’ll find demo source code in the DevExpress product installation folder (default path is C:\Users\Public\Documents\DevExpress Demos 21.2\Components\Blazor\). You can execute our sample solutions directly from this folder, or if you prefer, use the DevExpress Blazor Demo Center to view our demos. For more information on how to run Blazor demos locally, refer to the following help topic: Demos.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.

This EAP may not include all features/products we expect to ship in our v21.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

New DropDown Component

Our first Blazor EAP includes ships with an entirely new Blazor DropDown component. This new UI element allows you to display a non-modal drop-down window within a Blazor application. The DevExpress Blazor DropDown component ships with the following built-in features:

Header, Body, and Footer Customization

Use the component’s HeaderText, BodyText, and FooterText properties to customize text for the corresponding UI element. To customize window content and appearance, simply use the templates below: 

  • HeaderTextTemplate , BodyTextTemplate, FooterTextTemplate: Allows you to customize the DropDown’s content region. Predefined content alignment and paddings apply. 
  • HeaderTemplate , BodyTemplate, FooterTemplate: Allows you to customize the entire DropDown (all elements). Predefined appearance settings do not apply.

Position

Use one of the following properties to specify the DropDown’s position within your Blazor app:

  • PositionTarget property - specifies the selector of the element relative to which the DropDown component is displayed. 
  • PositionRectangle property - specifies the area relative to which the DropDown component is displayed. 

The PositionMode property defines DropDown orientation (absolute, relative, bottom, center, etc) when the component is activated.

Position Restrictions

The RestrictionMode property defines a restriction zone for the DropDown (Viewport, Page, Rectangle, Selector) inside which the DropDown appears. Use the DropDown’s RestrictionTarget (if you select the DropDownRestrictionMode.Selector option) or RestrictionRectangle (in for the DropDownRestrictionMode.Rectangle option) property to specify the restricted area. If the DropDown exceeds the boundaries of this zone, component behavior will be based on settings applied to RestrictionHandlingMode:
  • Ignore - the DropDown ignores the restriction.
  • Fit - the DropDown remains inside the restriction zone even if the DropDown's target element moves outside the zone.
  • Hide - the component is hidden on the client, but the DxDropDown.IsOpen property is equal to true.
  • Close - the DropDown closes. You can use the Closing event to prevent the close operation.

Custom Size and Resizing Capabilities

Use the component’s Width and Height properties to specify desired dropdown size. Activate the AllowResize property to allow end-users to modify dropdown size. When enabled,end-users can drag the component's border to modify both width and height.

Show and Close Actions

Call the ShowAsync and CloseAsync methods to show and close the DropDown component in code.
Demo: Navigation and Layout - DropDown

Grid

We’ve extended the capabilities of our new Blazor Grid. This EAP includes the following new features

Row Selection

Our Blazor Grid now supports both single and multiple row selection. The new SelectionMode property specifies current mode.

Selection via Mouse Clicks

Users can easily select and deselect rows via mouse clicks. To enable this capability, set the AllowSelectRowByClick option to true. To specify and access selected data items, implement two-way binding for the SelectedDataItems property.

<DxGrid Data="GridDataSource" AllowSelectRowByClick="true" 
@bind-SelectedDataItems="@SelectedDataItems"> <Columns> @*...*@ </Columns> </DxGrid>
@code {
    IEnumerable<object> GridDataSource { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }
    // …
} 

Selection Column

Our Blazor Grid ships with a new column type - DxGridSelectionColumn. This column can display checkboxes in multiple selection mode and radio buttons in single selection mode

<DxGrid Data="GridDataSource" ...>
    <Columns>/
        <DxGridSelectionColumn />
        @*...*@
    </Columns>
</DxGrid> 

Selection in Code

The following new methods allow you to manage Blazor Grid related selection options in code.
Add rows or data items to selection:
  • SelectRow
  • SelectRows
  • SelectDataItem
  • SelectDataItems
  • SelectAllOnPage

Remove rows or data items from selection:

  • DeselectRow
  • DeselectRows
  • DeselectDataItem
  • DeselectDataItems
  • DeselectAllOnPage

You can also call the ClearSelection method to reset all selection options.

Vertical and Horizontal Scrolling

Our Blazor Grid now displays a vertical scrollbar when the height of its content exceeds the height of the component itself.
As you would expect, a horizontal scrollbar appears when the total width of all columns exceeds the width of the component itself.

The horizontal scrollbar appears when the total width of all columns exceeds the width of the component itself.

Column Width Enhancements

v21.2 includes the following column width related enhancements:

  • When you specify a column’s Width property in pixels, the Grid renders the column with the defined width. The column’s cell content no longer affects column width. 
  • If the total width of all columns exceeds the width of the component itself, the Grid shows the scrollbar (as demonstrated in the previous section).
  • If the total width of all columns is less than the component width, the empty space remains to the right.
  • If you do not specify column widths, the Grid renders columns with equal widths.
  • If you specify widths for specific columns only, the Grid renders these columns with the defined widths and divides the remaining space between other columns equally.

We also limited the minimum column width to 50 pixels and introduced a new MinWidth option that allows you to modify this constraint.

Pager Position

You can now control the display of our Blazor Grid’s built-in data pager. Use the PagerPosition property to display the pager at the bottom, the top, or both the top and the bottom.

<DxGrid Data="GridDataSource" PagerPosition="GridPagerPosition.TopAndBottom">
    <Columns>
        @*...*@
    </Columns>
</DxGrid>

Column Text Alignment

Our Blazor Grid automatically aligns text within column data cells/footer cells based on column/bound data type. With v21.2, you can use the new TextAlignment option to modify text alignment as requirements dictate.

<DxGrid Data="GridDataSource" …>
    <Columns>
        <DxGridDataColumn FieldName="ProductName" 
TextAlignment="GridTextAlignment.Center"/> @*...*@ </Columns> </DxGrid>

Access Data Item

You can now access the processed data item within data-related event handlers (CustomSort, CustomGroup, CustomSummary, and so on) and the CellDisplayTemplate.

<DxGrid Data="GridDataSource" …>
    <Columns>
        <DxGridDataColumn FieldName="ProductName">
            <CellDisplayTemplate>
            @{
                var dataItem = @context.DataItem;
                //...
            }
            </CellDisplayTemplate>
        </DxGridDataColumn>
        @*...*@
    </Columns>
</DxGrid> 

Rich Text Editor

New UI Dialogs

We have extended the capabilities of our Blazor Rich Text Editor and introduced the following new UI dialogs:

  • Insert Table
  • Hyperlink
  • Bookmark
  • Font
  • Paragraph
  • Tabs
  • Insert Cells
  • Delete Cells
  • Split Table Cells
  • Find and Replace
  • Page Setup
  • Alert

New Context menu

The DevExpress Blazor Rich Text Editor now includes built-in context menu support. This menu displays different options based on the clicked element and allows users to initiate actions without using the ribbon.

New API

Our Rich Text Editor ships with a new ReadOnly option. This option allows you to place the editor in read-only mode. We have also added a Modified property. As its name implies, this property indicates whether the current document has unsaved changes. 

With the Rich Text Editor’s DocumentFormat setting, you can specify the format used to store document content (allows you to open and save documents using a format other than OpenXml).  

And finally, GotFocus, LostFocus allow you to handle corresponding events when the control receives and loses focus.

Web Report Designer Enhancements

Updated User Interface

The Web Report Designer's Updated UI

Please review the following article for information related to UI enhancements introduced in this EAP: Reporting — Updated Web Report Designer UI (Coming Soon in v21.2).

To explore this new UI, be sure to check out the following online demo: Web Report Designer - Online Demo.

Cross-Tab

Our Web Report Designer ships with a new Cross-Tab report control. We’ve also included a Cross-Tab report wizard to help you create cross-tab reports with ease. 

Web Report Designer - Cross-Tab

Report Design Analyzer

The Report Design Analyzer panel (designed to help you isolate, diagnose, and address common report design/layout-related issues) has been integrated into the DevExpress Web Report Designer (v21.2).

Web Report Designer - Report Design Analyzer

Refer to the Reporting — Early Access Preview (v21.2) post to learn more about upcoming Reporting tool features.

Tabs Scroll

In this release, we introduce a new ScrollMode property that allows you to specify how users navigate between tabs when they do not fit the container’s width. The following modes are available:

  • Auto - the scroll mode is adapted to the device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
  • NavButtons - the container displays a few tabs that fit the width. Users can navigate to other tabs in the following ways: use the navigation buttons, or hover the mouse pointer over a tab, hold the Shift key, and scroll the mouse wheel.
  • Swipe - the container displays a few tabs that fit the width. To navigate to other tabs, users can swipe tabs, or hover the mouse pointer over the container, hold the Shift key, and scroll the mouse wheel.
  • NoScroll - users cannot scroll tabs. The tabs that do not fit the container’s width are moved to a new line.

Coming Soon in v21.2

The features below are not included in our first EAP, but we expect to make them available in an upcoming beta (v21.2).

Grid

  • Editing within an Edit Form
  • Editing within a Popup Edit Form
  • Page Size Selector
  • Pager Customization Options

Scheduler

  • Templates for various cell types (date headers, resource headers, headers that display days of a week, etc).

Rich Text Edit

  • Localization

Data Editors

  • Custom buttons
  • Item templates for list editors

Charts

  • Side-by-side stacked and full-stacked series
  • Diameter, minimum diameter, and inner radius for Pie and Donut charts
  • Axis tick customization support
  • Localization
  • Axis inversion and custom position

Context Menu

  • Templates support 

Your Feedback Counts

Should you have questions about this EAP, feel free to post your comments below. If you are testing our EAP and have usage related questions, please submit a support ticket via the DevExpress Support Center.

 

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Jaime Alvarez [VOLUNDAT]
Jaime Alvarez

Hi,

When the New Blazor Grid support Master Detail, Export to Excel, and online edit?

Cheers!!!

13 September 2021
Anurag Mahato
Anurag Mahato

Hello Vladimir,

What is status of following featuers.

1. New Data Grid - Inline Edit Mode with NewRowItemPosition NEW

2. New Data Grid - Merged Grouping

3. New Data Grid - Export and Print

4. ConfirmationAlert, and an Error dialog.

5. Binary Image 

6. Popup Control - Non-Modal State Support

7Popup Control - Mulitple Popup Windows.


Please update current status in Blazor Roadmap 2021 (https://community.devexpress.com/blogs/aspnet/archive/2021/02/22/blazor-ui-2021-roadmap.aspx)




 


14 September 2021
Isa_Tahiri
Isa_Tahiri

Very impressive ! Great Job. 

I did not see much about the Dashboard. (Currently in CTP) 

More specific questions... Is there any time frame for : 

 - the inline edit mode in grid

 - Criteria operator

 - Multi resources management in scheduler appointment

 - Collapsible group layout


Thanks 

BR

ISA


14 September 2021
Rick Mathers
Rick Mathers

I had started a new project originally targeting the new grid, but found I had to fall back to the old one, with these new updates I should be able to swap them back out. Thank you so much!!

Any news on an HTML/Markdown Editor (mostly HTML in my case)  I know it was not planned for this release, is it something we can look forward to it in future builds? 

Everything is coming together, keep up the great work.

14 September 2021
Stephen J White
Stephen J White

Hi Vladimir,

Great to see all of these changes being made for the grid. I especially like the new drop down component, because it has always been a pain to make those by hand using work arounds in boot strap and using javascript + CSS hacks. :)  I really appreciate you making this component.


For the grid, I recall reading earlier this year you had plans to add in-line / excel style editing support to the grid, but that was regarding the old grid control. Regardless of whichever one is going to get this feature, do you know if that will still be this year or if we will probably have to wait for 2022 or longer? If that is the case, it is fine, I just want to be able to have something to communicate back to users if they ask why that functionality still isn't available. 

14 September 2021
GarryH
GarryH
Nice work. 

Thanks for the EAP release.
14 September 2021
Rajesh Aravapalli
Rajesh Aravapalli
When are you planning to support AOT. 
15 September 2021
Andrzej Bukalski
Andrzej Bukalski
Please add HTML format for Reach Text Edit - it is critical for me
16 September 2021
Folger Henning
Folger Henning

Hi Vladimir,

Thanks for the EAP info. By the way, does the EAP version support any .net 6 RC or Preview?

16 September 2021
GIKAS MARKANTONATOS
GIKAS MARKANTONATOS

I was hoping for Blazor WASM (not Blazor Server) reporting. 


Is that still on the cards? At one time, it was under discussion, and now all references to it from you site has been removed, and the the Blazor report has be referred to as "Blazor Server" report. 


 

16 September 2021
Stephen Winstanley_2
Stephen Winstanley_2
Grid in cell editing please ASAP
17 September 2021
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
Hello,

I do appreciate your interest in our Blazor products. Let me group your questions by components and announce our general plans in brief.

Our main goal regarding the new Blazor Grid is to make migration as smooth as possible. For this purpose, we add all the features available in the current DxDataGrid to the DxGrid. I also expect to ship the Master-Detail and Export to an Excel document to be delivered in the v22.1 release.
The inline edit, no doubt, is in our plans, but I am not sure about the next major release.
New row position settings (top/bottom) become available in the upcoming v21.2.
Merged groups are not in immediate plans.
The new grid already supports the Criteria Operators-based filtering. Use the xGrid.FilterBy method to filter data by a supported criteria operator.

Dialogs
The Customization and other dialogs are postponed until v22.1 or 22.2.
Our new Drop Down component for Blazor operates in a non-modal state. You can attach it to any UI element or area. We will create several examples demonstrating the component capabilities once it is released.
Multiple popup windows are already supported. Please check this Popup demo to see how to display multiple popups on a page.

HtmlEditor and Scheduler multiple resource support are not in our plans for v22.1.


Should you have any other questions regarding ASP.NET products, feel free to email me at aspnetteam@devexpress.com or vladimir.frizen@devexpress.com.

 
20 September 2021
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
v21.2 EAP does not support .NET 6 yet. Please note that we support only officially released.NET/.NET Framework versions. So, while we are already researching our components' compatibility to .NET 6 RC1, we are unlikely to declare .NET 6 support until Microsoft officially releases it.
20 September 2021
Dmitry Tok (DevExpress Support)
Dmitry Tokmachev (DevExpress)

@Gikas: The list of supported platforms mentions Blazor Server only so as not to mislead people. Do you need to incorporate DevExpress Reports in pure Blazor WebAssembly apps or with an ASP.NET core backend? I’m also curious about your requirements regarding data type/volume for reports displayed in such apps. I’d appreciate it if you create a ticket and describe your reporting-related usage scenarios. Your feedback will help us frame our 2022 development efforts. 

20 September 2021
Jacek Kosiński
Jacek Kosiński
Have you any plan to allow inline editing in new grid ?
21 September 2021

Please login or register to post comments.