TreeView, ContextMenu - Some API members related to data binding are now obsolete. A new data binding approach was introduced

What Changed

We marked the TreeView's and Context Menu's *Expression properties as obsolete:

TreeView properties

• NameExpression
• TextExpression
• NavigateUrlExpression
• IconCssClassExpression
• ChildrenExpression
• HasChildrenExpression

Context Menu properties

• NameExpression
• TextExpression
• ClickExpression
• IconCssClassExpression
• IconUrlExpression
• BeginGroupExpression
• EnabledExpression
• VisibleExpression
• ChildrenExpression

Reasons for Change

In v21.1, we introduced a new way to bind the TreeView and Context Menu to data. You can now use the DataMappings property to bind these components to flat and hierarchical data. This approach has the following advantages:

• You do not need to use explicit type conversion (casting) that was required in *Expression properties.
• Properties related to binding are now specified in a separate tag <DataMappings>.
• The TreeView and Context Menu components can use collections that implement the INotifyCollectionChanged interface as a data source.

Impact on Existing Apps

These changes affect applications if the properties listed above are specified.

Razor
<DxTreeView Data="@ChemicalElements.Groups"
            TextExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Name)"
            ChildrenExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Groups)">
</DxTreeView>

Razor
<DxContextMenu Data="@MenuItems"
               ItemClick="((args) => { InvokeAsync(StateHasChanged); })"
               TextExpression="(item => (item as TextFormattingMenuItem).Text)"
               ClickExpression="(item => (item as TextFormattingMenuItem).Click)"
               ChildrenExpression="(item => (item as TextFormattingMenuItem).Children)"
               BeginGroupExpression="(item => (item as TextFormattingMenuItem).BeginGroup)"
               IconUrlExpression="(item => (item as TextFormattingMenuItem).IconUrl)"
               @ref="@ContextMenu">
</DxContextMenu>

How to Update Existing Apps

Follow the steps below to update your applications:

• Make sure the Data property specifies a data source.
• Remove the obsolete properties.
• Add the <DataMappings> tag to the component markup.
• Create the DxTreeViewDataMapping or DxContextMenuDataMapping instance and map its properties to data source fields. Mappings are used to link the component's data model to the data source.
  For flat data, the Key and ParentKey properties are required.
  For hierarchical data, the Children property is required.

You can also create several DxTreeViewDataMapping or DxContextMenuDataMapping instances to specify different mappings for different item hierarchy levels. Use the Level property to specify the item hierarchy level for which data mappings are applied.

If you used the DxContextMenu.ClickExpression property, replace it with the ItemClick event handler.

Razor
<DxTreeView Data="@ChemicalElements.Groups">
    <DataMappings>
        <DxTreeViewDataMapping Children="Groups" Text="Name"/>
    </DataMappings>
</DxTreeView>

Razor
<DxContextMenu Data="@MenuItems" ItemClick="@ItemClick">
    <DataMappings>
        <DxContextMenuDataMapping Children="Children"
                                  Text="Text"
                                  IconUrl="IconUrl"
                                  BeginGroup="BeginGroup" />
    </DataMappings>
</DxContextMenu>

@code {
   // ....
    void ItemClick(ContextMenuItemClickEventArgs args) {
        ((TextFormattingMenuItem)args.ItemInfo.DataItem).Click();
        InvokeAsync(StateHasChanged);
    }
}