Blazor Component Suite — Early Access Preview (v24.1)

As you may know, our next major update (v24.1) will ship in a few months. In this post, I'll summarize some of the features/capabilities available in our early access (EAP) build. Before I begin — a quick reminder: If you are an active Universal or DXperience subscriber and want to explore upcoming v24.1-related features/capabilities before official release, you can download our EAP build via the DevExpress Download Manager. Should you encounter issues with the EAP build, please submit a support ticket using the DevExpress Support Center.

TreeList (CTP)

This EAP includes the first version of our Blazor TreeList with the following features:

• Binding to flat (self-referenced) data
• Horizontal and vertical scrolling
• Paging
• Sorting
• Filter Row
• Total Summaries
• Column Resizing and Reorder

We expect to support additional data binding modes/features for the final v24.1 build. To explore the capabilities of the EAP-version of the DevExpress Blazor TreeList control, simply access our locally installed Blazor demos and proceed to TreeList → Overview.

HTML Editor

Our Blazor HTML Editor allows you to format text and visual content and store it as HTML or Markdown. Users can apply inline formatting and modify font, size, and color as needs dictate. Additionally, the DevExpress Blazor HTML Editor now offers a range of block formatting features, including headings, text alignment, lists (bullet and numbered), code blocks, and quotes.

To explore the capabilities of the EAP-version of the DevExpress Blazor HTML Editor, simply access our locally installed Blazor demos and proceed to HTML Editor → Overview.

File Input

Our new Blazor File Input component allows you to introduce file upload functionality to your Blazor app without creating a separate Web API project with an upload controller.

Our Blazor File Input control supports multiple upload modes (Instant and OnButtonClick), can upload multiple files simultaneously, and allows you to validate file size and extension both on the client and server.

Handle the FilesUploading event to upload selected files. For each file, the event supplies a Stream you can open to read file content. Once the read operation is complete, you can send the file to another destination, save it to the file system, or display the file content on a web page.

The following code snippet configures FileInput to upload files to a specified folder:

<DxFileInput FilesUploading="OnFilesUploading" /> 

@code { 
    async Task OnFilesUploading(FilesUploadingEventArgs args) { 
        foreach (var file in args.Files) { 
            Stream? stream = default; 
            var filePath = "full path to the uploaded file";  
            FileStream fs = new(filePath, FileMode.Create); 
            try { 
                if(IsValidFile(file)) { 
                    stream = file.OpenReadStream(int.MaxValue); 
                    await stream.CopyToAsync(fs);  
                } 
            } 
            catch (Exception ex) { 
                if (file.CancellationTokenSource.IsCancellationRequested) 
                    // Handle the cancel action here  
            } 
            finally { 
                await fs.FlushAsync(); 
                fs.Close(); 
                if (stream != null) 
                    stream.Close(); 
            } 
        } 
    } 
} 

To explore the capabilities of the EAP-version of the DevExpress Blazor File Input control, simply access our locally installed Blazor demos and proceed to File Management → File Input.

DropDown Box

The DevExpress Blazor DropDown Box is a highly customizable editor - designed to display/use a variety of UI elements within its drop-down window: from simple lists and trees, to grids, or any combination thereof. You can assign an editor value programmatically based on page interactions. 

The following code snippet adds the DevExpress Blazor Grid to the DropDown Box popup.

<DxDropDownBox Value="Value" QueryDisplayText="QueryText" > 
    <DropDownBodyTemplate> 
        <DxGrid Data="@GridData" ShowSearchBox="true" SelectedDataItem="@Value" 
            SelectedDataItemChanged="item => GridSelectedDataItemChanged(item, context.DropDownBox)" .../> 
    </DropDownBodyTemplate> 
</DxDropDownBox> 

@code { 
    Customer Value { get; set; } 
    IEnumerable<object> GridData { get; set; } 
    string QueryText(DropDownBoxQueryDisplayTextContext arg) { 
        if(arg.Value is Customer value) 
            return value.ContactName; 
        return string.Empty; 
    } 
    
    void GridSelectedDataItemChanged(object item, IDropDownBox dropDownBox) { 
        Value = item as Customer; 
        dropDownBox.HideDropDown(); 
    } 
} 

To explore the capabilities of the EAP-version of the DevExpress DropDown Box control, simply access our locally installed Blazor demos and proceed to Data Editors → DropDown Box.

Toast

Our new Blazor Toast component allows you to notify users about processes and events. Notification messages can remain visible until a user clicks the close button or closed automatically after a predetermined amount of time. The DevExpress Blazor Toast component supports four theme modes (Dark, Light, Pastel, and Saturated) and the following notification styles:

• Danger
• Info
• Primary
• Success
• Warning

You can place a DxToast component in markup and call the Show method to display it. 

<DxToastProvider Group="ToastContainer" /> 
<DxToast @ref=toast Text="The process has been completed." Group="ToastContainer" /> 

@code { 
    DxToast toast; 
    toast.Show(); 
} 

Alternatively, add the DxToastProvider component on a page and use the notification service to create toasts at runtime. 

<DxToastProvider Group="ToastContainer" /> 

 @code { 
    [Inject] IToastNotificationService ToastService { get; set; } 

    ToastService.ShowToast(new ToastOptions { 
        Group = "ToastContainer", 
        Text = "The process has been completed." 
    }); 
} 

To explore the capabilities of the EAP-version of the DevExpress Blazor Toast control, simply access our locally installed Blazor demos and proceed to Dialogs and Windows → Toast Notification.

Drawer

Our new Blazor Drawer component allows you to add a "dismissible" navigation side panel to your web application. The control includes the following features:

• Left-side and right-side position.
• Overlap and shrink display modes.
• The minimized drawer state.
• Header, body, and footer templates.

To explore the capabilities of the EAP-version of the DevExpress Blazor Drawer control, simply access our locally installed Blazor demos and proceed to Layout → Drawer.

Map

The DevExpress Blazor Map component can display geo maps with markers and route info within your Blazor-powered web app. The component retrieves relevant data from a GIS service (Bing, Google, or GoogleStatic - requires application authentication with an appropriate API key) and ships with the following capabilities:

• Marker/route configuration and customization options.
• Built-in map navigation and type controls.
• Manual map adjustment.
• Map and marker "click" support.

To explore the capabilities of the EAP-version of the DevExpress Blazor Map control, simply access our locally installed Blazor demos and proceed to Map → Overview.

Polar Chart

The DevExpress Polar Chart for Blazor allows you to visualize data within a polar coordinate system - where each point on a plane is determined by the distance from the center and the angle from a fixed direction. The DevExpress Blazor Polar Chart component ships with the following capabilities:

• Multiple series types: line, area, bar, stacked bar, and scatter.
• Continuous, discrete, and logarithmic axis value support.
• Spider web mode.
• Chart element customization: labels, tooltips, legend, and many more.

To explore the capabilities of the EAP-version of the DevExpress Blazor Polar Chart, simply access our locally installed Blazor demos and proceed to Charts → Polar and Radar.

Bar Gauge

Our Bar Gauge for Blazor displays data as circular bars - where each bar indicates a single value. Our Blazor Bar Gauge ships with the following capabilities:

• Geometry and layout configuration.
• Palette customization.
• Export and printing support.
• Real-time data updates.
• Gauge element customization: labels, tooltips, legend, and many more.

To explore the capabilities of the EAP-version of the DevExpress Blazor Bar Gauge control, simply access our locally installed Blazor demos and proceed to Bar Gauge → Geometry.

Sparklines

Sparklines for Blazor displays value trends using a compact UI metaphor. You can use DevExpress Blazor Sparklines as a standalone component or embed it into other UI controls. Sparklines support multiple series types and allows you to configure series-specific and general settings at the root component level.

To explore the capabilities of the EAP-version of the DevExpress Blazor Sparkline control, simply access our locally installed Blazor demos and proceed to Charts → Sparklines.

New Rendering Engine

The following DevExpress Blazor components now use our optimized rendering engine (instead of Bootstrap):

• Charts
• Rich Text Editor
• Scheduler

Keyboard Support

To address accessibility standards and improve user experiences for those with disabilities, v24.1 adds keyboard navigation support for the following Blazor UI components:

• Date Edit
• Time Edit
• Tree View

Project Templates

.NET 8 Authentication and Authorization

Our Blazor project templates for .NET 8 include an option to add ASP.NET Core Identity and Token-based Authentication to your projects. In addition to the necessary infrastructure, our templates generate an authentication interface powered by DevExpress Blazor components. 

Grid

Header Bands

The DevExpress Blazor Grid can now arrange columns into logical groups called bands. Each band contains its own header displayed above column headers. The Grid also supports multi-level bands wherein a band can include other bands within it (as well as columns without a band so as to span the entire band region).

While end-users can reorder columns within bands or move them to the Group Panel, column movement between bands is restricted.

To explore the capabilities of the EAP-version of the DevExpress Blazor Grid control, simply access our locally installed Blazor demos and proceed to Grid → Columns → Header Bands.

Export Server-Side Data to Excel

v24.1 introduces Blazor Grid data export functionality for any supported server-side data/Server Mode sources (GridDevExtremeDataSource, or CustomDataSource). Remote data can be exported to XLS, XLSX, and CSV formats.

The DevExpress Blazor Grid can now fetch records from a remote data source to/from the exported document. While fetching records, the Grid displays a loading indicator. To avoid flickering, the indicator is displayed only during estimated fetch time.  For more information on this feature, refer to the following help topic: Data Export.

To explore this feature in greater detail, download a sample project here.

New Cell Editor Appearance

In-place editors in the filter row, edit row, and edit cells of the DevExpress Blazor Grid ship with a new improved look/feel - and automatically display validation icons, when required. The appearance of grid cells is now consistent in both display and edit modes.

Built-in Value Posting

We added the following new method to EditModelSaving event arguments: CopyChangesToDataItem. This method allows you to copy all changes made to the edit model during editing. Complex field values can be copied as well.

The following v23.2 code snippet...

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) { 
    var editModel = (EmployeeEditModel)e.EditModel; 
    if (dataItem != null) { 
        dataItem.FirstName = editModel.FirstName; 
        dataItem.LastName = editModel.LastName; 
        dataItem.Title = editModel.Title; 
        dataItem.HireDate = editModel.HireDate; 
    } 
 } 

... can now be replaced with a shorter version:

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) { 
    var editModel = (EmployeeEditModel)e.EditModel; 
    if (dataItem != null) { 
        e.CopyChangesToDataItem(); 
    } 
} 

New Tab Navigation

The Tab key now navigates between all Grid cells regardless of a cell editor's active state. Users can also leave the table area by pressing Ctrl + Up or Ctrl + Down (Alt + Up or Alt + Down on Mac).

Charts

Annotations

The new Blazor DxChartAnnotation object allows you to create chart annotations — comments that contain information about chart content. You can populate annotations with image or text content. You can also anchor annotations to chart elements (series points or axes) or position annotations based on pixel coordinates. DevExpress Blazor Chart components also allow you to customize annotations as needed — you can configure annotation borders and shadows, image and text settings.

Error Bars

The new DxChartSeriesValueErrorBar object allows you to configure error bars (to indicate measurement precision or uncertainty). They display a possible value range next to a series point. Error bars can display fixed values or percentages, statistical function values, or error values obtained from data source fields.

Strips

Our new Blazor DxChartAxisStrip object allows you to create and configure axis strips. You can use a strip to highlight a range between two axis values or an area above/below a value. These highlighted areas help users determine whether a point falls in or out of a predefined range. You can also add a DxChartAxisStripLabel object to strip markup to display and configure strip labels.

API Enhancements

PieChart settings:

• SegmentDirection - Specifies the direction in which the chart arranges series slices.
• StartAngle - Specifies the angle at which the chart positions the first series slice.

Axis settings:

• WorkdaysOnly - Specifies whether the chart displays only workdays on the axis.
• WorkWeek - Specifies weekdays DxChart treats as workdays.
• WorkDates - Specifies dates DxChart treats as workdays.
• Holidays - Specifies dates DxChart marks as holidays.

Axis Range settings:

• Length - Specifies range length.
• MinVisualRangeLength - Specifies the minimum length of the visual range.
• VisualRangeUpdateMode - Specifies how the visual range behaves if new points are added to the data source.

Rich Text Editor

Table API

Our new Blazor Rich Text Editor Table API allows you to modify table layout, decoration, and structure at runtime.

var table = await documentAPI.Tables.CreateAsync(0, columnCount, rowCount);
await table.ChangePropertiesAsync((properties => {
    properties.AutoFit = false;
    properties.Style = "Grid Table 5 Dark Accent 1";
    properties.Width = new TableWidth { Type = TableWidthType.Twips, Value = 9000 };
    properties.TableStyleOptions = TableStyleOptions.TotalRow | TableStyleOptions.HeaderRow;
}));

To explore the capabilities of the EAP-version of the DevExpress Rich Text Editor control, simply access our locally installed Blazor demos and proceed to Rich Text Editor → Document API.

Context Menu Customization

v24.1 introduces extended UI customization options for the DevExpress Blazor Rich Text Editor. You can now customize the component's context menu and associated sub-menus. Handle the CustomizeContextMenu event to: 

• Add or remove built-in menu items
• Add custom menu items
• Customize item appearance/behavior.

With v24.1, you can also control context menu visibility using the ContextMenuEnabled property.

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu /> 

@code { 
    void OnCustomizeContextMenu(IContextMenuItemCollection items) { 
        if (selection.Intervals[0].Length > 0) { 
            var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]); 
            textToSearch = span.Text.Trim(); 
        } 
        else 
            textToSearch = null; 
        
        var searchItem = items.AddCustomItem(0, "Google Search...", async () => { 
            var url = $"https://www.google.com/search?q={HttpUtility.UrlEncode(textToSearch)}"; 
            await JSRuntime.InvokeVoidAsync("open", url, "_blank"); 
        }); 
        searchItem.Enabled = !string.IsNullOrEmpty(textToSearch); 
        searchItem.IconCssClass = "search-icon"; 
        items.Remove(RichEditContextMenuItemNames.CutSelection); 
        items.Remove(RichEditContextMenuItemNames.CopySelection); 
        items.Remove(RichEditContextMenuItemNames.Paste); 
        var clipboardItem = items.AddCustomItem(1, "Clipboard"); 
        clipboardItem.BeginGroup = true;
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
    }
} 

To explore the capabilities of the EAP-version of the DevExpress Rich Text Editor control, simply access our locally installed Blazor demos and proceed to Rich Text Editor → Context Menu Customization.

Scheduler

Recurrence Form Customization

v24.1 ships with an enhanced Scheduler AppointmentFormShowing. It now allows you to customize recurrence options for both Appointment and Recurrence forms. For instance, you can modify the list of items available in the Appointment form’s Repeat section as needs dictate:

...Or modify the list of repeat end items and weekday list in the Recurrence form:

The following code snippet customizes the Scheduler's recurrence options. 

<DxScheduler ...  AppointmentFormShowing="OnAppointmentFormShowing"/> 

@code {
    void OnAppointmentFormShowing(SchedulerAppointmentFormEventArgs args) {
        args.FormInfo.RepeatItems = new List<SchedulerRecurrenceType>() {
            SchedulerRecurrenceType.Yearly,
            SchedulerRecurrenceType.Weekly,
            SchedulerRecurrenceType.Never
        };
    
        args.FormInfo.RecurrenceFormInfo.RepeatEndItems = new List<SchedulerRecurrenceRange>() {
            SchedulerRecurrenceRange.OccurrenceCount,
            SchedulerRecurrenceRange.EndByDate
        };
        
        args.FormInfo.RecurrenceFormInfo.WeekDayItems.Remove(SchedulerWeekDays.WeekendDays);
    }
}

Built-in Scroll Bars

The DevExpress Blazor Scheduler component automatically displays a scroll bar (for all supported view types) when cells don't fit within control boundaries/size. To specify Scheduler boundaries/size, modify width/height parameters using CSS: 

<style>
    .my-scheduler {
        height: 600px;
    }
</style>
 
<DxScheduler ... CssClass="my-scheduler" />

API Enhancements

You can now specify the minimum width of a day cell in Day, Week, and Work Week views. Pass the integer value to the CellMinWidth property to set cell width in pixels.

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to share your v24.1 EAP-related feedback in the form below: 

Free DevExpress Products - Get Your Copy Today