Blazor Components - New Charts customization, Updated Data Grid and TreeView API and more (available in v19.1.8)

ASP.NET Team Blog
16 October 2019

The newest version of DevExpress UI for Blazor (v19.1.8) is now available. This update includes key enhancements for the following DevExpress Blazor components: Data Grid, Charts, TreeView and Tabs.

Data Grid

New Data Paging API

Our Blazor Data Grid component ships with an external data navigation API. Activate the grid’s paging mode (DataNavigationMode = DataGridNavigationMode.Paging) and use the following API to enable paging:

  • PageIndex - Specifies the current page index.
  • PageIndexChanged - Fires when the current page index is changed.
  • PageCount - Returns the current page count.
  • PageCountChanged - Fires when the current page count is changed.

To synchronize paging, link the grid’s API with an external navigation component using the @bind- directive:

<DxPager @bind-ActivePageIndex="@GridPageIndex" PageCount="@GridPageCount"></DxPager>
<DxSpinEdit @bind-Value="@GridPageNumber" MinValue="1" MaxValue="@GridPageCount"></DxSpinEdit>
<DxDataGrid ...
    @bind-PageIndex="@GridPageIndex"
    @bind-PageCount="@GridPageCount"
    ...>
...
</DxDataGrid>
@code {
    int gridPageIndex;
    [Parameter] public int GridPageIndex {
        get => gridPageIndex;
        set { gridPageIndex = value; InvokeAsync(StateHasChanged); }
    }
    [Parameter] public int GridPageNumber {
        get => gridPageIndex + 1;
        set { gridPageIndex = value - 1; InvokeAsync(StateHasChanged); }
    }
    int gridPageCount;
    [Parameter] public int GridPageCount {
        get => gridPageCount;
        set { gridPageCount = value; InvokeAsync(StateHasChanged); }
    }
}

TreeView

Node Template Support

Our Blazor TreeView allows users to create reusable layouts for both nodes and associated content via templated UI elements. Available templates are listed below:

  1. NodeTemplate - Specifies a template for all TreeView node content. The template is the same for all nodes.
  2. NodeTextTemplate - Specifies a template for all TreeView node text. The template is the same for all nodes.
  3. Template - Specifies a template for an individual node's content.
  4. TextTemplate - Specifies a template for an individual node's text.

To learn more, please review our TreeView templates demo.

New Node Expand/Collapse Actions

You can now specify which user action expands or collapses a node. To enable this feature, set the NodeExpandCollapseAction property to one of the following actions:

  • Auto – Click (or double-click if the AllowNodeSelection property is set to “true”) a node or its expand button to expand/collapse the node.
  • NodeClick - Click a node or its expand button to expand or collapse the node.
  • NodeDoubleClick - Double click a node or its expand button to expand or collapse the node.
  • ButtonClick – Only click a node’s expand button to expand or collapse the node.
<DxTreeView @ref="@treeView"
    AllowSelectNodes="true"
    NodeExpandCollapseAction="TreeViewNodeExpandCollapseAction.NodeClick"
    ...>
    <NodeTemplate>
        <h4 class="d-inline-block m-0 @GetNodeCssClass(context)">@context.Text</h4>
    </NodeTemplate>
    ...
</DxTreeView>
@code {
    DxTreeView treeView;
    protected string GetNodeCssClass(ITreeViewNodeInfo nodeInfo) {
        var selectedNode = treeView.GetSelectedNodeInfo();
        var selectedStateClass = selectedNode != null &&
            selectedNode.Name == nodeInfo.Name ? "text-primary" : "text-secondary";
        var expandedStateClass = !nodeInfo.IsLeaf &&
            treeView.GetNodeExpanded(n => n.Name == nodeInfo.Name) ?
            "font-weight-bold" : "";
        return (selectedStateClass + " " + expandedStateClass).Trim();
    }
}

Event Source Detecting

We’ve extended the functionality of TreeViewNodeEventArgs. You can now use the TreeViewNodeEventArgs.CausedByAPI event argument to detect whether an event was raised through end-user interaction or programmatically.

<DxTreeView @ref="@treeView"
    BeforeExpand="@BeforeExpand" ...>
    ...
</DxTreeView>
@code {
    protected void BeforeExpand(TreeViewNodeCancelEventArgs e)
    {
        if (!e.CausedByAPI)
            treeView.CollapseAll();
    }
}

Node API

The new GetNodesInfo method provides information about required nodes. We’ve also extended the ITreeViewNodeInfo interface to include a property option that contains information about a node’s parent.

<DxTreeView @ref="@treeView"
    AllowSelectNodes="true"
    SelectionChanged="@SelectionChanged" ...>
    ...
</DxTreeView>
@code {
    protected void SelectionChanged(TreeViewNodeEventArgs e) {
        if (e.NodeInfo.Parent != null) {
            var parentSiblingNodesInfo = treeView.GetNodesInfo(n.Level ==
                e.NodeInfo.Parent.Level &&
                !string.Equals(n.Name, e.NodeInfo.Parent.Name));
            foreach (var nodeInfo in parentSiblingNodesInfo)
                treeView.SetNodeExpanded(
                    n => string.Equals(n.Name, nodeInfo.Name), false);
        }
        else
            treeView.CollapseAll();
    }
}

Charts

Point Customization

We’ve added new Blazor Charts API that allows you to customize point appearance. Handle the OnCustomizeSeriesPoint event and change how a point is drawn via the ChartSeriesPointCustomizationSettings object.

For example, you can customize a point’s visual settings (color, image, label’s text and visibility) as necessary:

<DxChart Data="@WeatherForecasts" OnCustomizeSeriesPoint="@PreparePointColor">
    ...
</DxChart>
@code {
    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings)
    {
        double value = (double)pointSettings.Point.Value;
        if (value > 75)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Red;
        else if (value < 25)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Blue;
    }
}

The following image helps illustrate the power of this new Blazor Chart feature (Point Customization):

DevExpress Blazor Charts

Chart point customization demos:

Point Customization

Point Image Customization

Point Label Customization

Tabs

With this update, DevExpress Blazor Tabs allow you to display an icon for any tab. To properly display an icon, set the CSS class of the icon to the TabIconCssClass property.

The code sample below illustrates how you can assign a custom CSS class to display an image on the first tab

<DxTabs>
    <DxTabPage Text="Tab Page 1" TabIconCssClass=" custom-icon-css-class">
        <div>Tab Page 1 Content</div>
    </DxTabPage>
    <DxTabPage Text="Tab Page 2">
        <div>Tab Page 2 Content</div>
    </DxTabPage>
</DxTabs>

ASP.NET Core 3.1 Preview 1

This week, Dan Roth announced that .NET Core 3.1. Preview 1 includes a Blazor WebAssemply update. Please note that Blazor WebAssemply is available in the latest preview of Visual Studio. We will support .Net Core 3.1 when it is officially released in December 2019. Drop me a line if you expect to use a preview of .Net Core 3.1 in your Blazor app.

Your Feedback Counts

As always, we welcome your feedback. Please share your thoughts below and tell us more about your Blazor-related development plans.

7 comment(s)
Ben_Hayat
Ben_Hayat
Great progress by DX Team;

Looks like by the time I'm ready to jump in for writing production code with Blazor WebAssembly (around May time), DX will have a nice set components for Client version.

..Ben
16 October, 2019
Konstantin Balashov
Konstantin Balashov
Could we expect some new controls like Kanban board, Rich text editor, Reporting in near future?
17 October, 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Hi,


@Ben

We work hard for that. :)


@Konstantin

While these components are in our future plans, we are focused on other components now. To make things clear, we are going to publish the Blazor components roadmap soon.

By the way, you can integrate our Reporting tool into a Blazor application right now using the solution demonstrated in this ticket

 

17 October, 2019
Ben_Hayat
Ben_Hayat
>>We work hard for that. :)<<

It shows...
17 October, 2019
Ben_Hayat
Ben_Hayat
>>To make things clear, we are going to publish the Blazor components roadmap soon.<<

Vlad, this would be VERY helpful. If this roadmap can cover at least till May 2020, when Blazor WebAssembly goes live.
This way, we as the developers know what components are going to be available to our App by the time Blazor goes GA.

Thanks!
18 October, 2019
Uwe Keim
Uwe Keim

To me, most of the Blazor DX controls look "under-engineered", poorly designed (both in code and UI) and are rather unusable because of the few functions, they provide; especially compared to the full-blown similar controls in DevExtreme.

E.g. the ComboBox (https://demos.devexpress.com/blazor/ComboBox) seems to not even provide a stable sorted list, giving me a random sorting of the data I pass.

Seems to me that very few (talented) people currently are assigned to Blazor component development. I do hope you massively increase the staff on Blazor (server-side) components to match the superior quality, look-and-feel and functionality of your other DevExpress/DevExtreme controls.

20 October, 2019
jdubeau
jdubeau

Mehul, I've been hearing rumors about other Blazor projects in the works. 

Blazor with electron for PWA, Hybrid Blazor , and Blazor flutter. 

What are your thoughts on that?  Might we see DevExpress flutter components? 

Sometimes, rumors are just talk. 

22 October, 2019

Please login or register to post comments.