We hope you are all doing well. Our best wishes to you, your team, and your family this holiday season.

This post includes links to a few interesting Blazor-related support tickets, along with a few help topics and technical videos published over the last three months. We hope you’ll find this info useful as you explore and integrate the DevExpress Blazor UI library within your Blazor app. Should you have any suggestions, feel free to leave a comment below.

Interesting Support Tickets

• Data Grid for Blazor - How to reset layout (T956524)
• Data Grid for Blazor - How to implement search with keyword highlighting (T942761)
• Data Grid for Blazor - How to declare a custom column with predefined settings and reuse it in different grids (T958025)
• DateEdit for Blazor - How to implement the week selection functionality (T944320)
• Memo for Blazor - How to show the limit maximum length and show the number of currently typed characteres (T946356)
• Blazor - How to use SVG icons from Bootstrap Icon Library with Blazor controls using the IconCssClass property (T955161)

Updated Help Topics

We extended our Blazor Gettting Started section with the following:

• Added information about the DevExpress .NET Product Installer.
• Described how to create applications using DevExpress Blazor Project Templates.

We added new helpful articles: 

• Two-Way Binding - Explains how to use two-way binding for DevExpress Blazor components.
• Validate Input - Describes how to use Blazor’s standard EditForm component to validate user input in DevExpress Data Editors, Form Layout, and Data Grid’s edit form.

Support for .NET 5.0

Note that Microsoft updated Blazor browser support in .NET 5.0. Refer to supported browsers and supported frameworks for details.

Troubleshooting

We documented common issues and described solutions in our Troubleshooting section:

• .NET 5.0: Operation is not valid due to the current state of the object
• Duplicate @key values in the if/else statement

New YouTube Videos

Over the last three months, we recorded and published the following new videos:

• DevExpress Blazor Date Edit: Getting Started
• DevExpress Blazor Data Grid: Master-Detail Layout
• DevExpress Blazor Stack Layout: Getting Started
• DevExpress Blazor Form Layout: Getting Started
• DevExpress Blazor Grid Layout: Getting Started
• DevExpress Blazor Scheduler: Customization

This playlist includes all videos related to our DevExpress Blazor UI Components.

Here’s this month’s edition of Tips & Tricks for our WebForms/MVC/.NET Core product line. As always, we hope these examples will be of value you as you explore our product line and incorporate our controls in your next ASP.NET project.

First things first – we recently published an article that describes how to use third-party tools with our Rich Text Editor for ASP.NET Core. Specifically, we demonstrate how to add spell checking functionality in v20.2

Rich Text Editor for ASP.NET Core - Spell Checking (Concept)

New Examples

The following new example demonstrates how to edit Diagram data using a separate custom form:

Diagram - How to edit data using a separate form (View on GitHub)

Here are examples of two popular usage scenarios for our Rich Text Editor for ASP.NET Core:

Rich Text Editor for ASP.NET Core - How to load/save documents from/to a database (View on GitHub)

Rich Text Editor for ASP.NET Core - How to submit document content with other values (View on GitHub)

And finally, here are a couple of examples related to our ASP.NET Web Forms Gantt control:

Gantt for Web Forms - A simple example with editing capabilities (View on GitHub)

Gantt for Web Forms - How to implement a custom "Task details" dialog (View on GitHub)

Remember, you can explore all DevExpress ASP.NET examples by navigating to our GitHub repository.

Interesting Technical Support Tickets

Common to All Platorms (ASP.NET MVC and Web Forms)

Grid View - How to restore all Batch Edit modifications on the client if certain rows do not pass server-side validation

ASP.NET Web Forms

Grid View - How to show values for a password column in the Edit Form with the ability to show/hide a password value

Grid View - How to apply the same layout settings to several grids

Splitter - How to make the splitter responsive and expand/collapse its panes automatically based on screen size

ComboBox - How to show a hint for each ComboBox item

ASPxScheduler - How to highlight the headers of TimeLine View scales based on a currently selected interval

ASPxScheduler - How to specify different appearance settings for different TimeLine scales

ASPxScheduler - How to limit the working time interval in a TimeLine View without using custom scales

ASPxScheduler - How to display a custom tooltip for appointment images generated in the InitAppointmentImages event handler

ASPxScheduler - How to automatically invoke the Appointment Dialog for editing a specific appointment

ASP.NET MVC

Grid View for MVC - DateRangePicker Header Filter doesn't evaluate the end-user's local time zone

Grid View for MVC - How to distinguish between Copy and Edit operations when saving data if operations were executed using different FAB items

Grid View for MVC - How to restore visible column indexes after visibility of specific columns was changed using Customization Window

ComboBox for MVC - How to change column caption style

Rich Text Editor for MVC - How to remove the "Ctrl + Click to follow link" text from hyperlink tooltip

Feedback

As always, we welcome your comments and feedback. If you’ve come across a useful Support Center ticket, feel free to share it with the DevExpress developer community here.

As you may already know, v20.2 includes new Blazor UI components that facilitate design of custom page layouts.

Prior to v20.2.4, DevExpress Blazor layout components worked best with static layouts. You could still create a responsive layout (for different screen resolutions) by changing the layout item's position in the grid. Unfortunately this approach required item row and column index recalculation for each screen size.

Our most recent update (v20.2.4) includes a much better option for apps that require responsive layouts. With the introduction of “named areas,” our new DevExpress Blazor Grid Layout API allows you to create responsive layouts with ease. “Named areas” was inspired by the grid template areas property of CSS Grid Layout.

How to use Named Areas

You can now assign area names to layout items and specify the area's placement inside grid rows (via the DxGridLayoutItem.Area and DxGridLayoutRow.Areas properties).

To use this new feature, you should:

1. Add <Items>...</Items> to the component's markup to define the Items collection.
2. Add DxGridLayoutItem objects to the collection. Use the Template property to specify item content.
3. Use the Area property to assign an area name to each layout item.
4. Use the DxGridLayoutRow.Areas property to place the areas within rows. If you need to leave a grid cell empty, use a period character (.).

Demo | Documentation

Comparison

To see how 'named areas' can help you deliver more responsive web apps, consider the following layouts for large, medium, and small screen sizes:

Large (Desktop)

Medium (Tablet)

Small (Phone)

Let's review the two options available to you when generating these distinct layouts (old vs new approach):

1. Row and Column Indexes

Using row and column indexes requires you to manage the grid layout's row and column count and set different DxGridLayoutItem indexes for screen sizes:

<DxGridLayout><Rows>
    @if(isLargeScreen) {<DxGridLayoutRow Height="508px" /><DxGridLayoutRow />
    }
    @if(isMediumScreen) {<DxGridLayoutRow Height="250px" /><DxGridLayoutRow Height="250px" /><DxGridLayoutRow Height="1fr" />
    }
    @if(isSmallScreen) {<DxGridLayoutRow Height="auto" /><DxGridLayoutRow Height="auto" /><DxGridLayoutRow Height="auto" /><DxGridLayoutRow Height="auto" />
    }</Rows><Columns>
    @if(isLargeScreen) {<DxGridLayoutColumn /><DxGridLayoutColumn /><DxGridLayoutColumn />
    }
    @if(isMediumScreen) {<DxGridLayoutColumn /><DxGridLayoutColumn />
    }
    @if(isSmallScreen) {<DxGridLayoutColumn />
    }</Columns><Items><DxGridLayoutItem Row="0" Column="0" RowSpan="isMediumScreen ? 2 : 1"><Template><SalesDataGrid Sales="salesData" /></Template></DxGridLayoutItem><DxGridLayoutItem Row="GetRowColIndex(0, 0, 2)" Column="GetRowColIndex(1, 1, 0)"><Template><SalesByCountryChart Sales="salesData" /></Template></DxGridLayoutItem><DxGridLayoutItem Row="GetRowColIndex(0, 1, 3)" Column="GetRowColIndex(2, 1, 0)"><Template><SalesInUSChart Sales="salesData" /></Template></DxGridLayoutItem><DxGridLayoutItem Row="GetRowColIndex(1, 2, 1)" Column="0" ColumnSpan="3"><Template><SalesByCityChart Sales="salesData" /></Template></DxGridLayoutItem></Items></DxGridLayout>

@code {
  int GetRowColIndex(int largeIndex, int mediumIndex, int smallIndex) {
    if(isMediumScreen)
      return mediumIndex;
    if(isSmallScreen)
      return smallIndex;
    return largeIndex;
  }
}

2. Named Areas

Take a look at the same example from above using named areas:

<DxGridLayout><Rows>
    @if(isLargeScreen) {<DxGridLayoutRow Areas="salesDataTable salesByCountry salesInUS" Height="508px" /><DxGridLayoutRow Areas="salesByCity salesByCity salesByCity" />
    }
    @if(isMediumScreen) {<DxGridLayoutRow Areas="salesDataTable salesByCountry" Height="250px" /><DxGridLayoutRow Areas="salesDataTable salesInUS" Height="250px" /><DxGridLayoutRow Areas="salesByCity salesByCity" Height="1fr" />
    }
    @if(isSmallScreen) {<DxGridLayoutRow Areas="salesDataTable" Height="auto" /><DxGridLayoutRow Areas="salesByCity" Height="auto" /><DxGridLayoutRow Areas="salesByCountry" Height="auto" /><DxGridLayoutRow Areas="salesInUS" Height="auto" />
    }</Rows><Columns>
    @if(isLargeScreen) {<DxGridLayoutColumn /><DxGridLayoutColumn /><DxGridLayoutColumn />
    }
    @if(isMediumScreen) {<DxGridLayoutColumn /><DxGridLayoutColumn />
    }
    @if(isSmallScreen) {<DxGridLayoutColumn />
    }</Columns><Items><DxGridLayoutItem Area="salesDataTable"><Template><SalesDataGrid Sales="salesData" /></Template></DxGridLayoutItem><DxGridLayoutItem Area="salesByCountry"><Template><SalesByCountryChart Sales="salesData" /></Template></DxGridLayoutItem><DxGridLayoutItem Area="salesInUS"><Template><SalesInUSChart Sales="salesData" /></Template></DxGridLayoutItem><DxGridLayoutItem Area="salesByCity"><Template><SalesByCityChart Sales="salesData" /></Template></DxGridLayoutItem></Items></DxGridLayout>

As you can see, the code for 'named areas' is simpler, cleaner, and easier to maintain.

Leave a comment below and let us know how you're using our Blazor Layout components in your web applications. We’d also love to know what you think of this new feature.

In this post, I'll discuss our new Menu component available as part of the DevExpress UI for Blazor (v20.2.5).

New Menu

Our Menu for Blazor allows you to add an adaptive menu to your Blazor application. Blazor Menu items are stored in the Items collection. Each item can display an icon, text, or both.

Orientation

The Menu's default orientation is Horizontal (menu items are side-by-side). Use the Orientation property to change the menu to Vertical (menu items are stacked).

Adaptive

The DisplayMode property allows you to optimize component layout based on device type:

• Desktop – Use this mode for devices with large screens.
• Mobile – Use this mode for mobile devices.
• Auto – In this mode, the component adapts to device type automatically.

The CollapseItemToIconMode, CollapseItemToHamburgerMenu, and AdaptivePriority properties allow you to fine-tune adaptive mode to address specific business needs.

Templates

Our Blazor Menu component allows you to customize the layout and appearance of menu items and associated elements via templates. You can apply a template to all items or to an individual item. Individual templates override common templates.

• DxMenuItem.Template and DxMenu.ItemTemplate - A entire item
• DxMenu.ItemTextTemplate and DxMenuItem.TextTemplate - Item text
• DxMenu.SubMenuTemplate and DxMenuItem.SubMenuTemplate - Item submenu

Feedback

Leave a comment below and let us know how you're using our Blazor Layout components in your web applications.

Before I detail our 2021 Roadmap for the DevExpress UI for Blazor, my thanks to everyone who shared feedback/thoughts last year. Your contribution is appreciated.

In this post, I’ll summarize our Blazor UI release plans for 2021. Should you have any questions about the products/features listed herein, feel free to submit your comments/questions below.

New Components

DevExpress Office Controls

v21.1

In our first major 2021 update, we plan to release the following DevExpress Office Controls for Blazor:

• Blazor Rich Text Edit - Advanced text editing/word processing functionality for your next Blazor web app.

• Blazor Spreadsheet - Excel inspired user experiences/capabilities for your next Blazor web app.

Navigation, Editors, & More

v21.2

We expect to ship the following new components in our second major update in 2021:

• File Manager - We're creating a new Blazor File Manager component to manage remote file system using standard file management operations.

• DropDownEdit - The Drop Down Edit component will be able to display custom content within its list.

• Binary Image - The Binary Column will allow you to display image data. You can bind this column to a property that contains images.

• Button Edit - Our Button Edit component will display a value in a text box editor and display one or more buttons within its client region.

• Accordion - The Accordion UI component will allow you to display collapsible content panels when presenting information in a limited amount of space. Use the Accordion component for side navigation and organize items into groups.

• Sidebar - With our new Sidebar component, you’ll be able to add a sidebar to your app and (located alongside the main display area) display relevant information or navigation options.

• New Dialogs - We're adding three new dialogs to our Blazor component suite: Confirmation, Alert, and an Error dialog.

Dashboards

Last year, we created a detailed tutorial on how to use our Web Dashboard within your Blazor Apps.

This year, we plan to introduce a native Blazor Dashboard component. This new component will simplify how you add our Web Dashboard control to your Blazor application and bind it to your backend.

Common Enhancements

v21.1

• Bootstrap 5 Support - Bootstrap 5 should be released in early 2021. Rest assured, our v21.1 Blazor components will support Bootstrap 5.

v21.2

• Accessibility Support - We expect to fully support WCAG 2.1 and Section 508 accessibility standards within our Blazor product line.

• New Dark Theme - We will introduce a new dark theme for our Blazor components.

• Content Security Policy Support - We expect to add support for the Content-Security-Policy header. With it, you'll be able to restrict resources such as JavaScript, CSS, etc (pretty much anything that the browser loads). Refer to the following page for more information: https://content-security-policy.com/

• Right To Left support - We expect to add right-to-left support to major Blazor components (Data Grid, Scheduler, etc.).

Data Grid

We expect to refine/enhance our Blazor DataGrid throughout 2021. We’ll share more information in this regard as these capabilities come online. Performance and adaptability remain major focus areas. Here are few things you can expect in 2021:

v21.1

• Criteria Language Syntax Support - We expect to support our Cross-Platform Class Library. With this criteria language, you’ll be able to construct advanced filter expressions.

• Custom Grouping - You'll be able to group data based on custom criteria as needed.

• Custom Sorting - This new API will allow you to apply custom conditions for any sort operation.

• Automatic Model Update - Our new Blazor Grid will allow you to bind to ObservableCollection and implement the INotifyPropertyChanged interface. The Grid will automatically update itself when changes are made to the observable collection.

Editing, Filtering, Adaptivity, & More

v21.2

• Data Aware (Excel) Export - We expect to introduce data-aware export mode (XLSX format). This mode will allow you to retain data shaping operations (filters, groups, conditional formatting, etc.) during XLSX document generation.

• PDF Data Export - Users will be able to export the contents of your grid to a PDF file.

• Inline Edit - Inline Edit mode will allow you to directly edit an individual row without displaying the Grid’s edit form.

• Search Panel - With the new Search Panel, end users will be able to filter multiple columns simultaneously and find a specific value.

• Header Filter - End users will be able to filter data by selecting a corresponding item in the Header Filter popup dialog.

• Binary Image Column - The Binary Image column will allow you to display and export an image bound to a data field with binary data.

• Adaptivity Support - Our new adaptive mode will display cards rather than rows when viewing the Data Grid on a mobile device.

Data Editors

v21.1

• Masked Input - Controls with text fields (Blazor Text Box, Blazor ComboBox, etc) will support custom Masks (to help you control/manage user input).

• ComboBox Drop-down Auto Position

v21.2

• Item Template in Editors - Our List Box, Tag Box and Combo Box components will include a new template region. You will be able to display custom information within it as necessary (will include support for an image within the input box).

API Enhancements

• On Demand Data Loading - for our Blazor List Box, Combo Box, and Tag Box. Items that are not currently displayed can be loaded dynamically (based on end-user action). As you would expect, this capability will help improve page load speed.

• Focus an Editor in Code

• List Box - The DevExpress Blazor ListBox will allow you to bind a value field to a single data object.

Scheduler

v21.1

• Timeline - The DevExpress Blazor Scheduler will ship with a new Timeline View. The timeline will display appointments/events as horizontal bars along its timescale. This new UI paradigm will give end-users a clearer picture of upcoming/past events.

• Month view - A new Month View will allow your end users to view appointments by month. This view will position days one after another horizontally (so that they form weeks, while weeks are placed one under another).

v21.2

• Adaptivity Enhancements - We expect to improve rendering for mobile browsers.

Charts

v21.1

• Zooming and Scrolling - We expect to improve zooming and scrolling operations. The Chart control will aggregate data and hide excessive points when you zoom out.

• Display format in Series Label - Will allow you to assign custom display formats to any series label.

• Series Label Customization - Will allow you to change the look and feel of a series label or create custom labels.

Reporting

To learn more about the enhancements we’ll make for Blazor Reports, please refer to the following post: DevExpress Reporting - 2021 Roadmap. New 2021 features will include:

• Export To PDF - Tagged PDF
• Runtime Report Generation - New Fluent API
• Report Designer Enhancements

Popup Control

v21.1

• API Enhancements
  • Manage open and close actions
  • Control z-index
  • Set custom display position
  • Assign popup window size

v21.2

• Non-Modal State Support

• Multiple Popup Windows

Tabs

v21.1

• Content Lazy Loading support - This new feature will allow you to specify whether to load tab content immediately or when a tab is activated.

v21.2

• Adaptivity support
  • Automatic resize based on container size
  • Multiline tab support
  • Improved mobile device support

Menu

v21.1

• Data Binding Support - You'll be able to populate Menu items from a database.

Your Feedback Matters

One of our users recently asked us whether we could upgrade our Bootstrap ASP.NET Core controls to support the .NET Core 3.1 framework. The problem was that this control suite is in maintenance mode and has been for a couple of years, but nevertheless, we have decided to do the update.

Because this product was retired, we had removed it from our NuGet server. In this blog post I'll detail how you can upgrade this package via NuGet to support .NET Core 3.1.

NuGet Update

If you added your DevExpress private feed to Visual Studio, open the NuGet Package Manager Console and run the following command:

dotnet add package DevExpress.AspNetCore.Bootstrap -v 18.2.15-pre-21051 -s https://nuget.devexpress.com/{Your secret key}/api

Download NuGet

Alternatively, you can download the attached NuGet package and install it using the following steps:

1. Create a folder for local NuGet packages on a developer machine. For example:D:\Projects\LocalNuGetFeed\
2. Unzip the packageBootstrap ASP.NET Core NuGet Packages 18.2.15-pre-21051.zip to the created folder.
3. Open your application in Visual Studio, then open the NuGet Package Manager window.
4. Create a local feed (steps #1 and #2), make sure its check box is checked (step #3).
5. Enable the "Include prereleases" check box (see #4). You'll see the list of available packages to install:

Should you have any other questions, feel free to contact our support team.

Before I describe our 2021 ASP.NET Roadmap, my thanks to everyone who shared feedback and responded to our surveys last year. Your contribution is appreciated.

The following list outlines the features/capabilities we expect to incorporate into our ASP.NET Core, WebForms, and MVC components this year.

ASP.NET Core

DataGrid - Export to PDF

Last year we added a PDF Export feature to our DataGrid for ASP.NET Core (as a CTP). This year, we plan to officially release our PDF Export engine and add the following new features:

• WISIWYG cell data export
• Fit-to-page option
• Multi-page export
• Long cell text support (wrapping)
• Built-in export progress indicator
• Cell, format, and appearance customization for exported values

If you have already tried or plan to try our new PDF Export API and want to share your feedback, please refer to this discussion page.

HTML/Markdown Editor

To introduce Table support, we were forced to forked Quill v2.0 in our v20.2 release cycle. A positive outcome of this fork was IE11 support - something that survey results suggest remains important for a large number of our customers. Originally, IE11 support was dropped by the Quill team in Quill v2.0.

This year, we will incorporate the following new features into our HTML/Markdown Editor:

• Image upload
• Extended table support:
  • Manage tables via context menus
  • Add table headers
  • Multiline text within cells
  • Cell-merge operations
  • Customize table/cell appearance

If you are using the latest CTP version of our HTML/Markdown Editor and want to share your RTM requirements, feel free to leave your feedback in the following discussion pages: Upload Images and Table Support.

Scheduler - Horizontal Virtual Scrolling

Virtual Scrolling was first introduced in v20.2 and was made available in vertically grouped day and week views. Virtual Scrolling improved performance when displaying hundreds or even thousands of events/groups. In v21.1 this enhancement will be extended to timelines and horizontally grouped day and week views. We'll post an update in this thread once our implementation is ready for review.

Gantt - API Enhancements and PDF Export

We continue to address requests regarding recently released components such as Gantt and Diagram for ASP.NET Core. Most requests are related to component customization. In 2021, we'll add the following customization capabilities to our Gantt component:

• Customize task appearance via templates
• Customize behavior via a new set of events raised when a task or a dependency is added/removed
• Expand/collapse tasks programmatically
• Show/hide dependencies via a toolbox item or programmatically
• Specify initial date range to display
• Scroll to a specific date programmatically
• Support sorting by column

Another important and highly requested feature we expect to incorporate is PDF Export.

Diagram – API Enhancements

We expect to ship the following ASP.NET Core Diagram customization features in 2021:

• Customize item appearance via custom CSS styles
• Get a shape/connector model from its underlying data item key
• Iterate through all diagram shapes and connectors
• Extend diagram item events with new 'onHover' and 'onLeave' events

File Manager – API Enhancements

We will extend the ASP.NET Core File Manager and make it more customizable with the following new APIs:

• Allow custom HTTP headers in RemoteFileSystemProvider
• Customize context menu items for individual files/folders
• Show custom errors on the client side
• Show/hide Progress Panel and Folder Tree
• Add events to precisely control file/folder operations (folder creation, file upload, moving files, deleting files, etc.)
• Wrap long file names in the File Manager's detail view
• Customize icons in the Folder Tree

Material Design Enhancements

The Google team constantly updates its Material Design Guidelines. We plan to incorporate relevant changes and previously planned Editor Label Animations. If you have any specific requests about Material Theme support in DevExtreme, feel free to let us know via the feedback form below this post.

ASP.NET Web Forms and MVC

Common Enhancements

We expect to optimize many of our ASP.NET Web Forms and MVC components, including our GridView, Scheduler, Rich Text Edit, Spreadsheet, and HtmlEditor. We’ll share specific information in this regard as they become available (once an optimization has been applied, I’ll let you know here on this blog). Please stay tuned.

Gantt - API Enhancements and PDF Export

We continue to address requests regarding recently released components such as Gantt and Diagram. Most requests are related to component customization. In 2021, we'll add the following customization capabilities to our Gantt component:

• Customize task appearance via templates
• Customize behavior via a new set of events raised when a task or a dependency is added/removed
• Show/hide dependencies via a toolbox item or programmatically
• Specify initial date range to display
• Scroll to a specific date programmatically
• Automatically calculate component height

Another important and highly requested feature we expect to incorporate is PDF Export.

Diagram – API Enhancements

We expect to ship the following new Diagram customization features in 2021:

• Customize item appearance via custom CSS styles
• Get a shape/connector model from its underlying data item key
• Iterate through all diagram shapes and connectors
• Extend diagram item events with new 'onHover' and 'onLeave' events

Feedback

If you'd like to share your thoughts with our team, please comment below. If you have not responded to our survey, we encourage you to do so whenever time permits.

We expect to update this page throughout the year, so definitely bookmark this page for future reference.

Hope you are all doing well. I wanted to quickly summarize some of the new features introduced in our most recent minor update (v20.2.6). Please note that our next major update (v21.1) is expected to ship in May. I’ll post an update on all the capabilities we expect to release next month, but if you’d like, feel free to review our Blazor Roadmap for more information today.

Data Grid

Drop-Down Width Modes for Combobox Columns

We've added the DropDownWidthMode property to our Data Grid's combobox column. Use this property to set the width of the combobox column editor’s drop-down list. This editor is displayed within the filter row and edit form. The following three modes are available:

• ContentOrEditorWidth (Default) - Item text is fully displayed. Minimum list width matches the editor.
• ContentWidth - List width equals the width of the longest list item.
• EditorWidth - List width matches the editor. List items are truncated if they do not fit.

Fixed Memory Issues

We have also addressed a few critical issues related to memory leaks. These fixes address issues related to data refresh and component dispose.

Scheduler

New API to Track StartDate Changes

The StartDate property now supports two-way binding to the data field. A new StartDateChanged event allows you to track StartDate property changes and perform any necessary custom actions.

Common Settings for Recurrent Appointments

We added a new DxSchedulerRecurrenceSettings class that allows you to specify common values for appointment recurrence properties. You can specify an instance of this class with your own configuration to the new RecurrenceSettings property of the Scheduler Data Storage.

Chart

Grid Lines

A new DxChartAxisGridLines.Visible property allows you to display or hide grid lines (per axis). By default, our Blazor Chart displays grid lines for the value axis but hides them for the argument axis. To change grid line visibility for an axis, add the DxChartAxisGridLines component and set the Visibility property.

The code below demonstrates how to display both horizontal and vertical Chart grid lines:

<DxChartArgumentAxis><DxChartAxisGridLines Visible="true" /></DxChartArgumentAxis><DxChartValueAxis><DxChartAxisGridLines Visible="true" /></DxChartValueAxis>

Tooltip Position

You can display the DxChartTooltip component inside or outside a series using our new Position property:

Data Editors

HTML Events

DevExpress Blazor Editors ship with a comprehensive API (properties, methods, and events) to help you configure and customize our components. For more information, refer to the component’s description.

If the included API does not meet your requirements, rest assured, you can use standard HTML attributes and event handlers to further configure our Blazor components. HTML event handlers are automatically assigned to the component’s input element. This ensures that events such as onblur or onfocus work seamlessly with our components:

<DxTextBox @onblur="OnBlur" />
@code {
  void OnBlur() {
    //…
  }
}

For a complete list of data editors and supported event handlers, refer to the following help topic: HTML Attributes and Events.

IDE Productivity Tool

CodeRush for Visual Studio and Visual Studio Code now ships with templates to help you to quickly create popular DevExpress components for Blazor:

For more information, refer to the following help topic: Templates for DevExpress Components.

If you install v21.1 or visit our website after official release, you will notice a second Blazor Grid component in our product lineup (available as a CTP). In this blog post, we'll explain why we introduced a new Grid control, what "CTP" means, and what you can expect in the future from both controls.

Why We Decided to Develop a New Blazor Grid Component

Simply said, we ran into major limitations with our current Blazor Data Grid, DXDataGrid.

Our new Blazor Grid control, DXGrid, will allow us to deliver the features you have been waiting for: improved editing, grouping, and more.

Of course, we would have preferred to simply modify our current grid but unfortunately, this was not an option. We quickly discovered that rewriting the core created its own set of issues. Bottom line - the better choice was to leave the current control in a stable state and introduce a migration path to the new component for those interested in our new Grid.

Rest assured, while this is a new native Blazor Grid component, under the hood, it uses our proven .NET Core Data libraries. The same libraries we use with our many other .NET Core Grids.

We are confident that our new Blazor Grid will bring you the features and performance that you've come to expect from DevExpress Data Grids.

"CTP" and Feature Parity with our Existing Control

Our new Blazor Grid control is available as a Preview (CTP) in v21.1. This simply means that the control is not yet ready to fully replace the existing control – it still lacks a few features. Here's how the controls currently compare:

When Should You Switch to the New Control?

If the current feature list suits your requirements, you can switch now. We expect both controls to be stable and advise you to make your decision based on our published feature set.

We plan to add the following features to the new control in upcoming v21.1 minor updates:

• Filter Row and Criteria Operator support
• Row Selection
• Data Editing

We also expect to officially launch the product in our v21.2 release cycle. Our hope is to add the following features by our v21.2 release:

• Scrolling
• Master-detail support

It's hard to predict the date for complete feature parity, but right now we estimate this to be the v22.1 release.

How to Switch

You can use the new control's demos and documentation to learn about its capabilities and related API. If you need assistance, feel free to contact our support team. We're happy to help.

Our team is working on a detailed migration guide document that will help with the transition process. We expect to make it available in upcoming minor updates.

Our Plans for the Original Blazor Data Grid

Going forward, we will focus the majority of our efforts on the new control, but we will continue to support and maintain our original Grid control. Here are a few features we expect to incorporate in our original grid over the next few months:

• Support "Display" data annotation attribute in data columns
• Implement Header Text template for columns
• Implement a confirmation dialog for delete operations
• Add CssClass, HeaderTextAlignment properties to a column
• Add API that customizes a column's default editor
• Add API settings to customize Popup Edit Form and control its behavior
• Add a Show method to display the Column Chooser next to any UI element

We estimate that the transition period will take about a year, so our original grid will remain in our distribution until v22.1 or v22.2.

Let Us Know If You Have Any Questions

Please contact our Support team or leave a comment below if you have any questions about this transition.

Our most recent release (v21.1) includes a new Masked Input data editor. As you might expect, this new Blazor UI element allows you to control data input and force users to enter data values that conform to specific standards. Our Masked Input supports the following mask types.

Text Mask

The text mask type allows users to enter alphabetic, numeric, or alphanumeric characters at specific positions. This mask can be used for things such as phone numbers, zip codes, and social security numbers.

You can use a DxTextMaskProperties component inside the Masked Input's markup to specify additional settings for this mask type:

• Placeholder - The character used as a placeholder in a masked editor.
• SaveLiteral - Specified whether Masked Input should include literals for an editor’s value.

<DxMaskedInput @bind-Value="@Phone" Mask="(999)000-0000"><DxTextMaskProperties Placeholder="@('\*')" SaveLiterals=false /></DxMaskedInput>

Numeric Mask

The Numeric Mask mask type allows users to enter numeric values (integers, float, currency, percentage, etc.). This mask type supports the standard numeric .NET format.

<DxMaskedInput @bind-Value="@Price" Mask="C" />

Date Time Mask

The Date Time Mask type allows users to enter a date and/or time values using the standard .NET date and time format. You can use DxDateTimeMaskProperties to define caret behavior via the CaretMode property:

<DxMaskedInput @bind-Value="@Date" Mask="d"><DxDateTimeMaskProperties CaretMode="MaskCaretMode.Advanced" /></DxMaskedInput>

Regular Expression and Custom Mask

Regular Expression and Custom Mask types allow you to specify a custom text pattern. The syntax is similar to the POSIX ERE specification.

Use DxRegExMaskProperties component to specify the following settings:

• MaskAutoCompleteMode - Autocompletion mode used by the editor.
• Placeholder - The character used as the placeholder in a masked editor.
• PlaceholdersVisible - Specifies whether the editor should show/hide placeholders in a masked editor.

<DxMaskedInput @bind-Value="@Email" MaskMode="MaskMode.RegEx"
 Mask="(\w|[.-])+@(\w|-)+\.(\w|-){2,4}"><DxRegExMaskProperties PlaceholdersVisible=false /></DxMaskedInput>

Note: You can use the Culture to specify culture settings used by masks. This property is applied for all mask types.

<DxMaskedInput @bind-Value="@Price" Mask="C"><DxNumericMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")" /></DxMaskedInput>

Additionally, like other DevExpress Blazor Data Editors, Masked Input ships with the following core functionality:

• Display format - Use the DisplayFormat property to format the display value when the editor is not focused.
• Prompt text - Use the NullText property to specify the text editor’s placeholder text when the editor’s value is null.
• Clear button - Use the ClearButtonDisplayMode property to display a Clear button with the control (Clear removes all content within the Masked Input).
• Read-only and disabled modes.

Our most recent major update - v21.1 – includes a series of new features and enhancements for the DevExpress Blazor Scheduler control.

Timeline View

The timeline displays appointments as horizontal bars along with one or multiple timescales. This calendar view offers end-users a clear and concise picture of upcoming/past events:

DemoDocumentation

Month View

The Month View allows end-users to view all events within a given month. You can also configure the Month View to display multiple months simultaneously (with the MonthCount property):

DemoDocumentation

Appointment Tooltip Template

Our Blazor Scheduler’s Appointment Tooltip can be used to display summary information for an appointment or change its properties. In previous versions of this control, you could not modify tooltip content. In v21.1., you can specify custom content for the tooltip via the AppointmentTooltipTemplate. To access appointment properties, simply use the SchedulerAppointmentTooltipInfo object.

DemoDocumentation

Operation Restrictions

Our Blazor Scheduler and Calendar control can now restrict end-user operations as necessary. For example, you can create a read only calendar view for specific user groups and give other the ability to edit, create and delete appointments. Our new API allows you to implement these usage scenarios with relative ease. Use the AllowCreateAppointment, AllowEditAppointment, and AllowDeleteAppointment properties to configure desired behaviors.

DemoDocumentation

API Enhancements

We also implemented a number of enhancements to our API – they include:

• SelectedAppointment property and the SelectedAppointmentChanged event: Allow you to manipulate and track appointment selection;
• ActiveViewTypeChanged event: Allows you to detect when a user selects a different Scheduler view;
• AppointmentFormMode property: specifies whether to use a compact appointment edit form, a pop-up form, or both;ShowAppointmentTooltip property: Allows you to hide the Blazor Scheduler’s tooltip.

What's Next

We are currently working to deliver a fully adaptive control so as to improve the mobile user experience. We’ll have more to share in this regard in the coming months. And, of course, we are planning to further extend our API and make the control even more flexible.

Should you have any questions or comments on these features, feel free to submit your feedback below.

As you may already know, our most recent release (v21.1) includes a number of enhancements for the DevExpress Blazor Chart component. In this post I’ll summarize these new features and briefly describe their use.

Zoom and Pan

The DevExpress Blazor Chart component now supports zoom and scroll operations for the following XY (Cartesian) series views: bars, lines, areas, financial, range bar, and range area.

To enable zoom/scroll, add the DxChartZoomAndPanSettings component to the chart and set the ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties.

To add a scrollbar, use the DxChartScrollBarSettings component. The ArgumentAxisScrollBarPosition property allows you to specify the scrollbar position.

<DxChart ...><DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
    ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.None" /><DxChartScrollBarSettings ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Top"
    ArgumentAxisScrollBarVisible="true" />
    ...</DxChart>

Aggregation and Summaries

Our Blazor Chart component now supports data aggregation - as such, you can now decrease the number of visible points and optimize chart performance. You can use different aggregate methods to group chart data.

Data aggregation is available for the X-axis. The chart splits the X-axis into intervals, aggregates data for each interval and displays values as series points. When users zoom the chart, it automatically re-aggregates data.

You can adjust aggregation settings by adding the DxChartAggregationSettings component to the series component:

<DxChart ...><DxChartLineSeries ... ><DxChartAggregationSettings Enabled="true" Method="AggregationMethod.Average"/></DxChartLineSeries>
  ...</DxChart>

If you only need to group data (without the automatic re-aggregation on zoom operations), use the SummaryMethod property instead.

Axis Range

You can now specify visual ranges for both argument and value axes. Use the StartValue and EndValue properties as requirements dictate.

Customize Margins

With v21.1, you can specify whether to add margins between outermost series points and chart boundaries. Use the SideMarginsEnabled and EndOnTick properties to control this behavior. If you set both these properties to false, maximum and minimum series points fall onto the axis lines.

<DxChart ... /><DxChartArgumentAxis EndOnTick="false" SideMarginsEnabled="false"></DxChartArgumentAxis><DxChartValueAxis EndOnTick="false" SideMarginsEnabled="false"></DxChartValueAxis>
  ...</DxChart>

Size Settings

You can now customize Chart size using the Height and Width properties. You can use absolute or relative units. If you specify a relative height/width, the final render will be based on parent container options. You can also specify a floating-point value which will be automatically converted to a pixel value.

Axis and Series Label Format

You can specify the display format used for axis and series labels. Use the Format property for axis or series as requirements dictate. The ChartElementFormat class contains properties for date-time formats and methods for numeric formats. You can also define a custom format based on the LDML standard.

<DxChartSeriesLabel Visible="true"
  Format='ChartElementFormat.FromLdmlString("\"Value: \" #0.00$;\"Value: \"-#0.00$")' /><DxChartSeriesLabel Visible="true" Format='ChartElementFormat.FixedPoint(3)' />

It's also possible to use a custom format string and specify precision for numeric formats.

<DxChartAxisLabel Format='ChartElementFormat.FromLdmlString("dd.MM.yyyy h:m")' /><DxChartAxisLabel Format='ChartElementFormat.Exponential(3)' />

Disable Animation

You can now disable the animation effect for Chart series when the Chart component is initially rendered. Set the DxChartAnimationSettings.Enabled property to false.

<DxChart ...><DxChartAnimationSettings Enabled="false"/></DxChart>

As you may know, our Blazor Popup component allows you to display a modal window within a Blazor application. A modal popup allows you to direct user action or display relevant content/information. Our most recent release (v21.1) introduces a series of new features/enhancements to our modal Blazor Popup component.

Header, Body, and Footer Customization

The DevExpress Blazor Popup component offers extended customization options for individual UI elements (header, body, and footer).

• ShowHeader | ShowFooter - Specifies element visibility. The default Popup displays header and body content. Use these two properties to display/hide the header and/or footer.
• HeaderText | BodyText | FooterText - Allows you to display plain text within an element and apply all predefined appearance settings.
• HeaderContentTemplate | BodyContentTemplate | FooterContentTemplate - Allows you to display any UI fragment within an element. These templates only affect the popup’s content region (predefined content alignment and paddings will be applied).
• HeaderTemplate | BodyTemplate | FooterTemplate - Allows you to customize the entire Popup element. Predefined appearance settings do not apply.

Documentation | Demo

<div @onclick="@(() => PopupVisible = true)"><p>CLICK TO SHOW A POP-UP WINDOW</p></div><DxPopup @bind-Visible="@PopupVisible"
  HeaderText="Header"
  BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet
    metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus,
    accumsan orci auctor, imperdiet mauris. Fusce id purus magna."
  ShowFooter="true"><FooterContentTemplate><DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK"
      Click="@context.CloseCallback" /></FooterContentTemplate></DxPopup>

@code {
  bool PopupVisible { get; set; } = false;
}

Alignment

Our Blazor Popup is now centered both horizontally and vertically on-screen. This helps enhance the user experience on both desktop and mobile devices. You can use the new HorizontalAlignment and VerticalAlignment properties to modify the Popup position as requirements dictate.

Documentation | Demo

<DxPopup ...
  HorizontalAlignment="HorizontalAlignment.Right"
  VerticalAlignment="VerticalAlignment.Bottom" />

Size

Our Blazor Popup's new Width and Height properties allow you to manually specify Popup size in absolute or relative units. You can also force the popup to adapt its width/height adapt to Popup content (set to auto ). Use our new MinHeight, MaxHeight, MinWidth, and MaxWidth properties to explicitly define a Popup's size constraints.

Documentation | Demo

<DxPopup ...
  Width="auto"
  MinWidth="300px"
  MaxWidth="600px" />

Show and Close Actions

Like in previous versions, you can implement two-way binding for the Visible property (to display and close the Popup). The property value is updated when a user closes the Popup.

<div @onclick="@(() => PopupVisible = true)"><p>CLICK TO SHOW A POP-UP WINDOW</p></div><DxPopup @bind-Visible="@PopupVisible"></DxPopup>

@code {
  bool PopupVisible { get; set; } = false;
}

Use our new ShowAsync and CloseAsync methods to display and close the Popup asynchronously. Additionally, users can now press Escape or click outside the Popup's boundaries to close it (CloseOnEscape and CloseOnOutsideClick options).

Documentation | Demo

Respond to Show and Close Actions

In v21.1, we implemented the following new events for our Blazor Popup:

• Showing - Fires before the Popup is displayed and allows you to cancel this action.
• Shown - Fires after the Popup is displayed.
• Closing - Fires before the Popup is closed and allows you to cancel this action.
• Closed - Fires after the Popup is closed.

Documentation | Demo

Multiple Popups

You can now display multiple Blazor Popups simultaneously. Popup Z-indices are updated automatically based on display order. You can also use the new ZIndex property to specify a Popup's Z-index manually.

Documentation | Demo

Rendering

In v21.1, our Blazor Popup changed its position in the DOM tree - it now renders directly in the document body. Previously, the Popup was rendered in the DOM tree at the position specified in code. Please consider this rendering change when you apply CSS selectors to the Popup.

More information

As you may already know, our most recent Blazor release (v21.1) ships with a new Rich Text Editor component for Blazor (available as a Community Tech Preview - CTP). Much like its ASP.NET MVC counterpart, this new Blazor component supports popular document formats (DOCX, RTF, TXT) and allows you to incorporate a Microsoft Word-inspired user experience within your Blazor Server applications.

Preview Release

At present, our Rich Text Editor CTP supports Blazor Server applications and includes the following built-in features:

• A Microsoft Word-inspired Text Editor user (including a Ribbon)
• API to create, open, and save documents (DOCX, RTF, and TXT)
• Content Formatting: Character Formatting, Paragraph Formatting, Floating Objects (images and text boxes)
• Content Layout Customization: Document Sections, Multi-column Layouts, Headers, and Footers
• Document Printing
• Simple View (Web Layout) Mode

Demo

Character and Paragraph Formatting

The DevExpress Rich Text Editor for Blazor ships with the following text formatting features:

• font settings (select font name, font size)
• character style (bold, italics, underlined)
• background and foreground color

End-users can easily modify entire paragraphs using the control's integrated UI formatting options: paragraph alignment, spacing and indentation, bullets, and numbering.

Additionally, the editor includes built-in UI to edit the document's header/footer and insert a Table of Contents.

Document Management and Document API

Our new Blazor Rich Text control supports asynchronous data binding and allows you to programmatically load document content as needs dictate. Use the DocumentContent property to specify the server-side variable used to store document content you need to load.

<DxRichEdit Id="richEdit" DocumentContent="@documentContent" CssClass="w-100 ch-480" />

@code {
  byte[] documentContent;
  protected override async Task OnInitializedAsync() {
    documentContent = await File.ReadAllBytesAsync(Path.Combine(AppContext.BaseDirectory, "Data\\Documents\\Example.docx"));

    await base.OnInitializedAsync();
  }
}

Our Rich Text Editor for Blazor also includes a special Document API to modify an open document programmatically. Use the DocumentAPI property to dynamically access the document content.

Demo

Floating Objects

The DevExpress Rich Text Editor for Blazor allows your end users to insert text boxes and images of popular formats (JPEG, PNG, and GIF) into a document. Users can create, move, resize, and rotate floating objects.

These floating objects, text boxes and images, can be anchored within a document in one of two ways: either inline (the object is displayed within the text) or floating. Floating means the object is strictly positioned, absolutely or relatively within the document, regardless of text flow. Of course, users can still freely position and scale floating objects using the control's UI.

Fields

In our Rich Text Editor for Blazor, document fields are special placeholders for non-static data that might change (for instance, a page number or date and time). These placeholders are replaced with actual data when the document is rendered for display or print. Standard fields include DATE, TIME, PAGE, NUMPAGES, TOC, and more.

To store custom (non-standard) information in your document, use the DOCVARIABLE field code. This field allows you to insert the required content programmatically by using the CalculateDocumentVariable event.

Printing

We've added support for WYSIWYG printing to generate a printout that closely mirrors the control's screen layout. When a user clicks the Print ribbon item, the editor will open a new browser tab, render the current document, then call the browser's print dialog.

Simple View

The Simple View mode allows you to display document content without page layout elements (margins, headers, or footers). This view can be useful when you need to display your document on a limited-width page.

You can enable this mode in two ways:

1. Use the Editor's Ribbon UI (click the Simple View command)
2. Set the ViewType property to Simple

Demo

Feedback

As always, we appreciate your feedback. If you have questions on our Blazor RTF control, please post your comment below or submit a support ticket via the DevExpress Support Center.

Our most recent Blazor UI update (v21.1.5) includes two helpful dialogs for the DevExpress Blazor Rich Text Editor component: 'Insert Table' and 'Hyperlink'. As their name suggests, these new dialogs allow users to create and modify tables or hyperlinks within our Blazor Rich Text Editor.

Insert Table Dialog

The new 'Insert Table' dialog allows users to quickly generate a new table and insert it into an existing document. The dialog includes options to set the table's column and row numbers. Click the 'Table' ribbon item located on the 'Insert' tab to display the dialog.

Hyperlink Dialog

The editor's new 'Hyperlink' dialog allows users to insert a new hyperlink or edit existing hyperlinks within a document. It includes settings for three hyperlink types: a hyperlink to a web page, a link to a position within the document (bookmark), or an e-mail address.

Click the 'Hyperlink' ribbon item to activate this dialog.

Your Feedback Counts

We’d like to hear from you about your development plans and needs. For some quick feedback, please submit your responses to this short survey:

And feel free to post additional comments below. Let us know what you think of our Blazor Rich Text Editor's new dialogs.

As you may know, we recently introduced an entirely new DevExpress Blazor Grid component in June (available as a CTP version). We continue to improve the capabilities of our new grid and expect to reproduce all the functionality supported by our existing Blazor data grid in short order.

This post summarizes the new features/enhancements we’ve made to the DevExpress Blazor Grid in our most recent minor release (v21.1.5).

Filter Row

Our Blazor Grid now ships with filter row support – a quick and easy way to incorporate data filtering within your Blazor app. This row displays in-place text editors for all data columns within a given Grid. When a user moves focus into the filter row’s editor, the Grid creates a filter condition based on editor value and applies this condition to the corresponding column.

To activate the filter row, enable the ShowFilterRow option.

<DxGrid Data="@DataSource"
        ShowFilterRow="true">
  @*...*@</DxGrid>

Documentation | Demo

Customization

We added the following new options to help you customize our Blazor Grid's filter row:

• FilterRowOperatorType - Specifies the operator used to create a filter condition based on filter row value (Equals, Contains, StartsWith, Greater, Less, and so on).
• FilterRowValue - Specifies the initial value in the filter row editor.
• FilterRowEditorVisible - Specifies whether to display the filter row editor.

You can also display your custom editor within a filter row cell (instead of our predefined text editor). To display a custom editor, define a column's FilterRowCellTemplate.

<DxGrid Data="@Data"
        ShowFilterRow="true"><Columns><DxGridDataColumn FieldName="OrderId" DisplayFormat="d" SortIndex="0"><FilterRowCellTemplate><DxSpinEdit Value="(int?)context.FilterRowValue"
                    ValueChanged="(int? v) => context.FilterRowValue = v"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" /></FilterRowCellTemplate></DxGridDataColumn><DxGridDataColumn FieldName="OrderDate" DisplayFormat="d"><FilterRowCellTemplate><DxDateEdit Date="(DateTime?)context.FilterRowValue"
                    DateChanged="(DateTime? v) => context.FilterRowValue = v"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" /></FilterRowCellTemplate></DxGridDataColumn><DxGridDataColumn FieldName="ProductName"
                      FilterRowValue='"Queso"'
                      FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
    @*...*@</Columns></DxGrid>

Documentation | Demo

Filter in Code

You can now set filter options in code. Call the FilterBy method to filter Grid data and the ClearFilter method to reset the applied filter.

<DxGrid Data="@Data"
        ShowFilterRow="true"
        @ref="MyGrid"><Columns>
    @*...*@<DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" /></Columns></DxGrid><DxButton Click="@(() => MyGrid.FilterBy("UnitPrice",
GridFilterRowOperatorType.Equal, 12))">Filter By "Unit Price"</DxButton><DxButton Click="@(() => MyGrid.ClearFilter())">Clear Filter</DxButton>

@code {
  object Data { get; set; }
  IGrid MyGrid { get; set; }
  // ...
}

Command Column

Our Blazor Grid now includes a new column type - command. At present, this new command column will only display a Clear button in the filter row. Users can click this button to reset the filter applied to the Grid.

We will extend the command column's functionality to support data management buttons – used to create, edit, and remove data rows.

To display a command column, declare a DxGridCommandColumn object within the Columns template.

<DxGrid Data="@Data"
        ShowFilterRow="true"><Columns>
    @*...*@<DxGridCommandColumn /></Columns></DxGrid>

You can also display custom content within the column's filter row cell. To do custom content, define the FilterRowCellTemplate.

Documentation | Demo

API Changes

Our Blazor Grid now includes two types of columns: data and command columns.

We made the following API changes to avoid confusion with column names:

• To add a data column to the Grid, you should now use the DxGridDataColumn class instead of the DxGridColumn class.
• The DxGridColumn is now labeled as an abstractclass because it contains the base API for both data and command columns.

We've also renamed the following templates:

• ColumnGroupRowTemplate ⇒ DataColumnGroupRowTemplate
• ColumnCellDisplayTemplate ⇒ DataColumnCellDisplayTemplate

Group Footer Summary

With v21.1.5, you can display group summary values in group footers. To display summary values in group footers, set the summary item's FooterColumnName property to the name of a group footer column.

<DxGrid Data="@Data"
        ShowGroupPanel="true"><Columns>
    @*...*@</Columns><GroupSummary><DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                        FieldName="TotalPrice"
                        FooterColumnName="TotalPrice" /></GroupSummary></DxGrid>

Documentation | Demo

Group Footer Templates

Our Blazor Grid now includes the DxGridColumn.GroupFooterTemplate and DxGrid.ColumnGroupFooterTemplate properties. These properties allow you to customize group footers as requirements dictate.

Group Footer Display Mode

By default, our Blazor Grid will display group footers when the corresponding groups are expanded and contain either summary values or custom template content.

You can now modify the manner in which group footers are displayed by defining the new GroupFooterDisplayMode property. Simply use one of the following options: Always , Never , or IfExpanded.

<DxGrid Data="@Data"
        ShowGroupPanel="true"
        GroupFooterDisplayMode="GridGroupFooterDisplayMode.Always">
  @*...*@</DxGrid>

For consistency, we also renamed the ShowFooter option to FooterDisplayMode so it closely matches GroupFooterDisplayMode. The FooterDisplayMode property allows you to manage the visibility of the Grid's footer section.

Column Name

We also introduced a Name property for all Grid columns. Use this property to specify a unique identifier for a given column (once named, use it to reference the column when creating total or group summaries).

This property will be helpful for columns where the FieldName property is not specified (command columns or data columns with custom display templates).

As you may know, our Form Layout component for Blazor includes data editors and allows you to create responsive edit forms with built-in auto-arrangement support. Our Blazor Tab component allows you to incorporate tabbed interfaces within your web app.

This post details new features/enhancements we’ve made to both components in our most recent release (v21.1).

Form Layout

Caption Position

We added a new CaptionPosition property to improve the flexibility of our Form Layout component's auto-generated design. Use this property to display a caption above (Vertical) or to the left of an item (Horizontal).

You can now specify this property individually for each group, tab page, or a single item. When you set the CaptionPosition at the Form Layout level, the property is passed down recursively, unless, one of the descendants has its own CaptionPosition specified. In essence, individual settings have higher priority.

Demo | Documentation

Item Caption Alignment

For a Form Layout with horizontal captions, we added an option that allows you to choose how paddings are calculated between captions and corresponding editors. You can use the ItemCaptionAlignment property to select one of the following options.

• All - Paddings are calculated based on the longest caption in the entire Form Layout component, except for tab pages wherein caption widths are always calculated separately.

• InGroups - Works like the All option, but the longest caption is chosen for each group. Captions outside the group do not affect caption alignment inside the group.

• None - Disables automatic caption width calculations. As such, caption width is equal to the width of its content. The corresponding editor will be placed directly after its caption and therefore, may not align with other editors in the group.

Tabs Enhancements

Render Mode

We added a new RenderMode property for the DevExpress Tabs component for Blazor so you can configure how content within Tabs is loaded by selecting one of the following options:

• Default– The component initially loads only content of an active tab. When a user selects another tab, its content is replaced by the content of the previously active tab in the DOM. Performance for initial load is fast because the component doesn't maintain the state of its tabs.
• AllTabs– The component loads the content of all tabs initially and stores it within the DOM. This mode speeds up navigation between tabs, but the page may take a longer time to load and can increase memory consumption.
• OnDemand (aka Lazy Load) – The component initially loads content of only the active tab. As the user selects other tabs, these are loaded and stored in the DOM. This mode allows you to maintain the tab's state and improve overall performance at the same time.

Tab Click

In v21.1, we implemented the DxTabs.TabClick and DxTabBase.Click events so you can catch and respond to tab clicks, as needed.

Use the TabClick event to process every tab click with the same code:

<DxTabs TabClick="OnTabClick"><DxTab Text="Tab 1"></DxTab><DxTab Text="Tab 2"></DxTab></DxTabs>

@ClickedTab

@code  {
  public string ClickedTab { get; set; } = "";
  void OnTabClick(TabClickEventArgs e) {
    ClickedTab = $"' Tab {e.TabIndex + 1}' has been clicked";
  }
}

To process a specific tab’s Click event, create an individual event handler for each tab:

@inject IJSRuntime JSRuntime<DxTabs><DxTab Text="Home" Click="OnHomeTabClick" />
  ...</DxTabs>

@code  {
  async Task OnHomeTabClick(TabClickEventArgs e) {
    if(e.MouseEventArgs.Detail == 2)
      await JSRuntime.InvokeVoidAsync("open", "/", "_blank");
  }
}

A masked input field can help you improve readability and better control data input within a form field. As you may already know, our last release (v21.1) added masked input support to our Blazor Date Edit, Time Edit, and Spin Edit components. This post summarizes the new enhancements made to these three Blazor data editors and examines how their implementation differs from those found in our Masked Input component].

Date Edit and Time Edit

As you may know, the DevExpress Date Edit for Blazor displays a drop-down calendar that allows users to select dates while the DevExpress Time Edit for Blazor displays a drop-down time picker. Both components now support a new Mask property.

To enable masks in both, set your desired mask pattern for the appropriate Mask property: DxDateEdit.Mask or DxTimeEdit.Mask. This mask type supports predefined mask patterns or the standard date and time .NET formats.

You can also specify additional mask-related settings (current culture, caret mode, etc) by configuring the DxDateTimeMaskProperties component (common for both mentioned components).

For instance, use DxDateTimeMaskProperties.CaretMode (advancing caret) to automatically move the caret to the next date or time section once an end-user has edited the previous value:

<DxDateEdit @bind-Date="@Date" Mask="D"><DxDateTimeMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")"
                            CaretMode="MaskCaretMode.Advancing" /></DxDateEdit>

Demo | Documentation

Spin Edit

The DevExpress Spin Edit for Blazor allows you to display and edit numeric values. With v21.1, you can specify a mask pattern (a value format) by using the new DxSpinEdit.Mask property and configure additional mask settings with the DxNumericMaskProperties component.

For more information on Numeric masks, refer to the following help topic: Numeric Masks.

Demo | Documentation

An Alternative - Masked Input

Let’s quickly review the capabilities of the new DevExpress Masked Input component.

While our Masked Input component for Blazor supports DateTime, Numeric, Text, and Regular Expressionmask types, it has one fundamental difference from the aforementioned data editors (Date Edit, Time Edit, and Spin Edit).

Most of our data editors work with standard data types (DateTime, numeric objects, etc), but you cannot use these editors (Date Time, Spin Edit, Time Edit) if you store data source objects (dates or numbers) as strings. The Masked Input component can work with string-based data fields. It converts strings from the data source to the appropriate data type (DateTime, int, and so forth) and then treats the resulting value as a date or number. This auto conversion process allows you to apply the desired mask type (Date-Time, Numeric) for your string objects.

To summarize, if you store your data source objects as strings, you should definitely consider the use of our Masked Input component. If you store your data using corresponding data types (DateTime, int, etc), feel free to use our new Mask property (for our Blazor Date Edit, Time Edit, and Spin Edit) instead.

Set Focus from Code

Before I wrap up, quick reminder that you can set editor focus in code. Use the FocusAsync method for all data editors that contain 'input' or 'text-area' elements (ComboBox, TagBox, Text Box, Masked Input, Memo, Spin Edit, Date Edit, and CheckBox) to set focus. For example, call the DxTextBox.FocusAsync to focus a Text Box from within Razor code:

<DxTextBox @ref="component" Text="This is a text box."></DxTextBox>

@code {
    DxTextBox component;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        component.FocusAsync();
    }
}

After some internal debate, we decided to end Partial/Medium Trust support across our entire ASP.NET product line (this includes DevExpress Reports and DevExpress Office File API) in our v21.2 release cycle (expected in Nov 2021). If you rely on medium trust, feel free to contact us via the DevExpress Support Center for assistance and migration strategies. While we don’t expect to reverse our decision (Microsoft has not update its implementation in quite a long time and maintenance continues to be an issue), we are more than happy to offer feedback and suggestions (for instance, we can certainly offer advice related to Docker containers.)

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.

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

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

Grid

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

• 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

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

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. 

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).

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