Blazor Components - .NET Core 3.1 Support and Enhancements for the Data Grid, TreeView, and Editors (v19.1.10)

ASP.NET Team Blog
10 December 2019

In this post, I'll discuss enhancements to the DevExpress UI for Blazor in the v19.1.10 release.

.NET Core 3.1 Support

Microsoft recently announced the release of .NET Core 3.1:

It’s really just a small set of fixes and refinements over .NET Core 3.0, which we released just over two months ago. The most important feature is that .NET Core 3.1 is an long-term supported (LTS) release and will be supported for three years.- Richard Lander, PM .NET Team

With the v19.1.10 release, our Blazor components now support .NET Core 3.1.

Data Grid Enhancements

HTML Decoration

Our Blazor Data Grid now allows you to decorate row and cell styles. For example, you can highlight important rows or cells using this new feature.

Our Data Grid ships with two new events: HtmlRowDecoration and HtmlDataCellDecoration. They can be used to customize row and cell appearance as needed. DataGridHtmlRowDecorationEventArgs and DataGridHtmlDataCellDecorationEventArgs event arguments provide information about the current row and cell.

DevExpress Blazor Data Grid - Conditional Highlighting

Demo

Row Click

A popular customer request is the ability to respond when the end-user clicks on a row. This release includes a new RowClick event that fires when a grid data row is clicked. The DataGridRowClickEventArgs event argument object provides information about the current row and cell.

The code sample below illustrates how to use the RowClick event to start data editing:

<DxDataGrid @ref="@grid"
            Data="@forecasts"
            RowClick="@OnRowClick" ...>
    ...
</DxDataGrid>

@code {
    DxDataGrid<WeatherForecast> grid;
    WeatherForecast[] forecasts;    ...
    void OnRowClick(DataGridRowClickEventArgs<WeatherForecast> args)
    {
        grid.StartRowEdit(args.DataItem);
        args.Handled = true;
    }
}

TreeView - Load Nodes on Demand

With this release, you can bind our Blazor TreeView component with complex or dynamically generated hierarchical structures in a more effective manner. When the LoadChildNodesOnDemand setting is enabled, the component does not load child nodes until a parent node is expanded for the first time. This optimizes performance because the TreeView will only request the required data from your data source.

You can also load child nodes on demand in either bound or unbound modes. If you bind the Blazor TreeView component to a data source, make sure to assign a lambda expression that specifies whether the data item has children (using the HasChildrenExpression property).

Demo

New Blazor CheckBox Component

We now offer a Blazor СheckBox component with extended state support: checked, unchecked and indeterminate:

DevExpress Blazor - CheckBox

Bind to a Model

You can bind the CheckBox to a specific model property using the Checked property:

<DxCheckBox @bind-Checked="@Value">...</DxCheckBox>

@code {
    bool Value;
}

The CheckBox component can also be bound to the following standard data types:

Bind to a Custom Type

If you want to bind our CheckBox to a custom type, set the ValueChecked, ValueUnchecked and ValueIndeterminate properties as necessary.

The following example demonstrates how to bind our Blazor CheckBox to a custom enumeration using the three properties:

<DxCheckBox @bind-Checked="@Value"
    ValueChecked="@Opinion.Yes"
    ValueUnchecked="@Opinion.No"
    ValueIndeterminate="@Opinion.Abstain">@Value.ToString()</DxCheckBox>

@code{
    enum Opinion { Yes, No, Abstain }
    Opinion Value = Opinion.Abstain;
}

DevExpress Blazor - CheckBox Custom Type

Toggle View for Mobile

Our Blazor CheckBox also provides a toggle to change its appearance on mobile and tablet devices. Use the CheckType property to use either the standard Checkbox component or the Switch component for mobile:

<DxCheckBox CheckType="@CheckType.Checkbox"/>
<DxCheckBox CheckType="@CheckType.Switch""/>

DevExpress Blazor - CheckBox Toggle for Mobile

Custom Appearance

You can customize the appearance of our Blazor CheckBox using images and other HTML content:

DevExpress Blazor - Custom Appearance

Demo

Blazor Data Editors - Null Values and Clear buttons

You can bind the Spin Edit and Date Edit components to nullable data types. Currently, the following Blazor components can be bound to nullable properties:

  • Check Box
  • Combo Box
  • Date Edit
  • Spin Edit
  • Text Box

The following code demonstrates how to bind to a nullable member:

<DxDateEdit @bind-Date="@DateTimeValue"
    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
</DxDateEdit>

@code {
    DateTime? DateTimeValue { get; set; }
}

In the sample above, the ClearButtonDisplayMode setting is optional. This setting allows the editor to display a Clear button when the editor has a non-null value:

DevExpress Blazor - Editors - Non-Null Values

Demo

Form Layout - CaptionFor

With this release, our Blazor Form Layout component will automatically bind a layout item's caption to a DevExpress editor located inside it. If you wish to assign a custom identifier to the caption's for attribute, use the CaptionFor property.

If you place a custom editor inside the item template, assign a unique identifier to the layout item's CaptionFor setting and to your custom editor's ID property:

<DxFormLayoutItem Caption="Contact Name:" CaptionFor="name_text_box">
    <Template>
        <input value="@Name" id="name_text_box">
    </Template>
</DxFormLayoutItem>

XAF Blazor

For our XAF customers, we have begun rigorous testing of the DevExpress Blazor control suite within XAF, our business application framework for .NET developers. For more information, please follow the XAF Team blog.

Feedback

As always, your feedback matters. Please share your thoughts with us - we want to do everything possible to earn your business now and into the future.

9 comment(s)
Dave Hesketh (Llamachant Technology)
Dave Hesketh (Llamachant Technology)
We are starting to use these components and they live up to the same level of excellence we've come to know from DevExpress. We are looking forward to XAF in Blazor.
10 December 2019
Dario D.
Dario D.

this sounds really nice, however unfortunately we won't be able to use blazor components until localization is available, i hope that's soon


br

11 December 2019
Shama Naz
Shama Naz
Very exciting updates looking for all these updates in XAF blazer 
11 December 2019
Igor Laktic
Igor Laktic

I am waiting blazor grid grand total.


11 December 2019
Nemo
Nemo
Are DevExpress Blazor components available for WebAssembly? If so, do they internally use C# mostly for rendering the HTML or is C# code just calling Javascript functions which are doing the actual rendering? I understand that until WebAssembly gets DOM manipulation, Javascript will still be needed. Question is how much of the rendering logic is C# vs. Javascript. Thanks.
11 December 2019
Stephen J White
Stephen J White

@Henry


First of all, keep it up, I am so happy you guys have gone all in with Blazor. There are so many reasons why I love the work that you, Julian, Ray and everyone else at DX does 😁


Second, if you haven't looked into it, I'd really love to see a vertical grid component for Blazor. I know you have the pivot grid, but it was really nice to have that vertical grid in the Winforms suite since it was much more simple to utilize in certain cases.  I'd also like to see the Rich Edit and Spread Sheet one day. I know these things take a lot of work, but I just wanted to mention this in case you were wondering if people will use them. I know my company would. 😊



11 December 2019
SandroRiz
SandroRiz

What about a HTML/Rich text editor like the ASP.NET one ?

We're starting the development of a software that require it, and I would like to remain  with DevExpress than switch to competitor (that seem to have a numbers of component, 65 vs a dozen, more higher...)

Do you have a Roadmap for Blazor Server Side components development?

11 December 2019
Mario Blatarić
Mario Blatarić

@Stephen - VerticalGrid is a great suggestion. Our first app was using it for data entry - and it was brilliant. Current version is using XAF which does not support this feature, so we kind of get used to the way it is, however, I would definitely go VerticalGrid because our customers preferred it over regular forms. 

There is no space wasted, everything is well organised and very clear for customer and is MUCH easier to customize and add/remove new fields for developers.

In some other roadmap, we mentioned a "compact" design would be great for certain types of apps (financial for instance). Compact design featuring vertical grid would be absolutely amazing.  

12 December 2019
Serge S (DevExpress)
Serge S (DevExpress)

@Nemo,

> Are DevExpress Blazor components available for WebAssembly?
Yes. You can run the online demo
as a Client-Side Blazor application from our GitHub repo.

> Question is how much of the rendering logic is C# vs. Javascript.
Main graphic part of charts are rendered in JavaScript based in JSON processed and prepared on server. But the chart templates, legend, titles/subtitles are rendered in C#.
All other components are fully rendered in C#. JavaScript may be used for some client functionality like Drag-n-Drop animation or sizes calculation, etc.

 
12 December 2019

Please login or register to post comments.