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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
18 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
A G 4
A G 4
When will an HTML editor be available?
16 May 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@AG4,

Thanks for your feedback and suggestion. We published the Blazor UI - 2020 Roadmap which outlines the plans for the first half of 2020. I'm not prepared to disclose our v20.2 plans at this moment, as we are holding major announcements for the Build Conference. However, we take your suggestion for an HTML Editor into consideration.

If you'd like to discuss this further then please send me an email at mharry@devexpress.com.

16 May 2020
Tim R
Tim R

I would like to second the remarks by @Mario Blatarić about the vertical grid:

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

Yes Yes Yes!

I too am looking forward to the VerticalGrid for Blazor.   


27 May 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Stephen, Mario, and Tim,

Thanks for your feedback. We'll consider your suggestion for a DevExpress VerticalGrid Blazor Component in the future.

28 May 2020
Thom Cawley
Thom Cawley
VerticalGrid & Inline edit please!
25 June 2020
CRM-96db2bb1-2a46-4b24-8eac-4b7b3eb4d6de
Customer158325
Dry cleaning is called where no water is used in the process, it is not technically dry. When you take your clothes to the dry cleaner, the first step they will do is pre-treat any stains with the help of a chemical agent, similar to how you treat your stains before washing at home. How Dry Cleaning Works. https://ask.solutions/how-dry-cleaning-works/
29 July 2020
CRM-96db2bb1-2a46-4b24-8eac-4b7b3eb4d6de
Customer158325
Dry cleaning is called where no water is used in the process, it is not technically dry. When you take your clothes to the dry cleaner, the first step they will do is pre-treat any stains with the help of a chemical agent, similar to how you treat your stains before washing at home. <a href="https://ask.solutions/how-dry-cleaning-works//"> How Dry Cleaning Works</a> https://ask.solutions/how-dry-cleaning-works/
29 July 2020
CRM-96db2bb1-2a46-4b24-8eac-4b7b3eb4d6de
Customer158325
This is the best option on how to download YouTube videos to your local storage. YouTube app for Android and iOS comes with a built-in Downloader. You can download an unlimited number of videos and in any quality. Whenever your device is not connected to the network, you will directly land on the download page when you open YouTube. https://ask.solutions/download-youtube-videos/
4 August 2020
CRM-350863ed-d552-4383-aa20-b42f05abfd5e
Customer164715

 

SEO(Search Engine Optimization) is the practice of optimizing your website as per search engine requirements in order to get a higher ranking in SERPs. The advantageous part of practicing SEO is driving a lot of organic traffic to your website for a very long period. 

https://auroravista.tech/blog/what-is-seo/

 

9 September 2020

Please login or register to post comments.