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

ASP.NET Team Blog
17 January 2020

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.

DevExpress Blazor Localization

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:

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.

DevExpress Blazor Data Grid - CheckBox Column

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"/>

DevExpress Blazor Data Grid - CheckBox Column Filter

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:

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:

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

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
4 comment(s)
Neil C Harrington
Neil C Harrington
Is it possible to make dropdown/popup size same as the combobox itself?
20 January 2020
Customer56436436
Customer56436436

IMHO it would be very good if these popups can be resized on the fly. I've seen this in  web controls from other developers.

I also look forward to the next controls:
1) Upload Control and FileManager - I'm looking forward to them with the ability to connect custom providers
2) Calendar with the ability to view several(!) months at the same time
3) Toolbar for organizing toolbars on various forms. There is an analog in DevExtreme
4) Combobox or Lookup with a drop-down list in the form of a grid

I would also like a simple and good example of how to make friends with Blazor and DevExtreme in the absence of many controls at the moment.

I'm also very annoyed with drawing and rebuilding fields on FormLayout. They are drawn first, and then abruptly change the size to the required size after a some(!) seconds. This is very annoying for users. Take a look at the demo with Form Layout.
Thank you for continuous development!
 
20 January 2020
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Hello,


Thank you for your feedback! I'm forwarding it to the team for analysis.

@Customer56436436

I recommend you watch Using a JavaScript Library with Blazor video that helps to integrate DevExtreme to Blazor apps. Should you have any other questions, feel free to contact our Support service at any time. 


20 January 2020
Eric ROUDART
Eric ROUDART

Hello dear DevExpress.

I know that IE11 isn't officially supported by Blazor, but there is an easy way to make IE11 work at least with Blazor Server and this workaround is recommended by asp.net core team for those who stuck with IE11:
https://github.com/dotnet/aspnetcore/issues/9436

Would it be possible to add this polyfill reference for IE11 visitors in your blazor demo цуи ышеу, so we can see what can work and what can't in you samples under IE11.
Now it doesn't work at all, when I believe it could be mostly functional for IE11 if you add polyfills.

Here is the missing polyfill which is even extended to make Telerik work in IE11:
https://github.com/Daddoon/Blazor.Polyfill#using-telerik-blazor-component-on-ie11



Thank you very much!

23 January 2020

Please login or register to post comments.