Blazor Components - Localization, Asynchronous data operations, and more (v19.2)

This post describes the enhancements we’ve made to the DevExpress UI for Blazor in our v19.2 release cycle:

.NET Core 3.1.1 Support

Version 19.2 supports the recent .NET Core 3.1.1 update that contains security and reliability fixes.

Localization

You can now localize our Blazor UI components. Localization is available for both server and client side Blazor hosting models.

For server-side Blazor projects, you can use the Satellite Resource Assemblies of the .NET Framework. We include NuGet packages with predefined satellite assemblies for German, Japanese, Russian and Spanish locales. At present, no official or recommended guidelines exist for client-side Blazor. Lacking official guidance, we opted to implement the IDxLocalizationService interface for client-side Blazor apps.

For other cultures, you can use our online Localization Service to generate custom resource files as needed. Please make sure all translations meet with your approval before including them into your software project.

Please take a look at this online example to learn more about our implementation.

Data Grid Enhancements

Asynchronous Data-Aware Operations

v19.2 includes a new asynchronous data-aware API for our Blazor Data Grid.

The new API allows you to execute database operations and await completion without blocking app code execution. This allows you to deliver more responsive solutions - even when connected to remote databases over slow networks.

Use the new DataAsync property to data bind asynchronously. This property supports IEnumerable<T> or IQueryable<T> data source types.

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync">
    ...
</DxDataGrid>

We also introduced the following asynchronous events:

• RowInsertingAsync
• RowUpdatingAsync
• RowRemovingAsync
• RowInsertStartAsync
• RowEditStartAsync
• RowEditCancelAsync

Online demo: Data Grid - Asynchronous Data-Aware Operations

Binding to Custom Data Source

With this release, you can bind our Blazor Data Grid to a custom data source. Assign the data source type to the Data Grid's T parameter and use the CustomData property to implement data loading logic. The CustomData delegate accepts a DataSourceLoadOptionsBase object as a parameter. It specifies various data loading options (such as sort and group information).

Two new extension methods for the DataSourceLoadOptionsBase class (ConvertToGetRequestUri and ConvertToHttpContent) have been added to help you generate proper requests for Web API services.

The following example demonstrates how to bind our Blazor Data Grid to a Web API service:

<DxDataGrid T="@WebApiOrder" CustomData="@LoadCustomData">
    ...
</DxDataGrid>

@code {
    [Inject] protected HttpClient Client { get; set; }

    public class WebApiOrder
    {
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Freight { get; set; }
        public string ShipCountry { get; set; }
    }

    protected async Task<LoadResult> LoadCustomData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken) {
        using var response = await Client.GetAsync(options.ConvertToGetRequestUri

            ("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/Orders"), cancellationToken);
        response.EnsureSuccessStatusCode();
        using var responseStream = await response.Content.ReadAsStreamAsync();
        return await JsonSerializer.DeserializeAsync<LoadResult>(responseStream, cancellationToken: cancellationToken);
    }
}

Online demo: Data Grid - Custom Data Source

CheckBox Column

Our Blazor Data Grid includes a new CheckBox column with extended state support: checked, unchecked, and indeterminate.

Use the Field property to bind the column to data:

<DxDataGridCheckBoxColumn Field="@nameof(Order.IsShipped)" />

You can bind the checkbox column to standard types. To bind the column to a custom type , set its ValueChecked, ValueUnchecked, and ValueIndeterminate properties:

<DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)
    ValueChecked="@OrderStatus.Delivered"
    ValueUnchecked="@OrderStatus.Processing"
    ValueIndeterminate="@OrderStatus.InTransit"
    Caption="Order Status" />

To help you filter CheckBox column data, our Blazor Data Gird creates a ComboBox editor in the filter row. Use the FilterTextChecked, FilterTextUnchecked, and FilterTextIndeterminate properties to assign custom text to the editor's dropdown items:

<DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)"
    FilterTextChecked="Delivered"
    FilterTextUnchecked="Processing"
    FilterTextIndeterminate="In transit"/>

In Switch mode, the checkbox column displays toggles instead of checkboxes. To enable Switch mode, set the CheckType property to Switch.

Scheduler

Operation events for appointments

v19.2 ships with new events for our Blazor Scheduler control. These events allow you to manage changes to individual appointments:

• AppointmentRemoving
• AppointmentRemoved
• AppointmentUpdating
• AppointmentUpdated
• AppointmentInserting
• AppointmentInserted

Handle these events to modify (or discard) Drag & Drop, Data Editing, Delete, and other appointment operations before data is saved to storage.

Online example - How to implement CRUD operations with the Web API Service

Editors - Null Text

NullText is a helpful feature which displays placeholder text in our ComboBox when empty.

We've added the NullText property to the following editors:

• TextBox (demo)

• SpinEdit (demo)

• DateEdit (demo)

<DxTextBox NullText="Type text..."></DxTextBox>

Breaking Changes - RCL Support

In December, Microsoft introduced the Razor Class Library (RCL):

Razor views, pages, controllers, page models, Razor components, View components, and data models can be built into a Razor class library (RCL). The RCL can be packaged and reused. Applications can include the RCL and override the views and pages it contains. When a view, partial view, or Razor Page is found in both the web app and the RCL, the Razor markup (.cshtml file) in the web app takes precedence. -Rick Anderson

We’ve migrated our components to support RCL and to give you a native approach for sharing resources. As such, v19.2 components now require .NET Core 3.1. The RCL also uses the Blazor native location for resources (particularly, for the dx-blazor.css file).

See the full list of breaking changes for version 19.2.

Free DevExpress Products – Get Your Copy Today