blazor-devexpress-dot-blazor-dot-dxtreeview-8cba66bc.md
Specifies data mappings.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public RenderFragment DataMappings { get; set; }
| Type | Description |
|---|---|
| RenderFragment |
A UI fragment to be rendered as TreeView nodes.
|
You can populate the TreeView component with items from a data source.
Follow the steps below to bind TreeView to data:
Use the Data property to specify a data source. You can use different collection types:
Add the DataMappings tag to the component’s markup.
Create the DxTreeViewDataMapping instance and map node properties (HasChildren, IconCssClass, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.
View Example: TreeView for Blazor - How to load child nodes on demand (lazy loading)
The following code snippet binds the TreeView to the collection of flat data items. It specifies mappings for the Text, Key, and ParentKey properties.
@if(Data == null) {
<p><em>Loading...</em></p>
} else {
<div class="cw-320">
<DxTreeView Data="@Data"
@* ... *@
AnimationType="LayoutAnimationType.Slide">
<DataMappings>
<DxTreeViewDataMapping Text="Name"
Key="Id"
ParentKey="CategoryId"/>
</DataMappings>
</DxTreeView>
</div>
}
@code {
List<FlatDataItem> Data { get; set; }
protected override void OnInitialized() {
IEnumerable<ProductFlat> products = ProductData.Products;
IEnumerable<ProductCategory> productSubcategories = ProductData.Categories;
Data = new List<FlatDataItem>(Enum.GetValues<ProductCategoryMain>().Select(i => new FlatDataItem() { Name = i.ToString(), Id = i }));
Data.AddRange(products.Select(i => new FlatDataItem() { Name = i.ProductName, Id = i.Id, CategoryId = i.ProductCategoryId }));
Data.AddRange(productSubcategories.Select(i => new FlatDataItem() { Name = i.Subcategory, Id = i.SubcategoryID, CategoryId = i.Category }));
}
}
namespace BlazorDemo.Data {
public class FlatDataItem {
public string Name { get; set; }
public object Id { get; set; }
public object CategoryId { get; set; }
}
}
Run Demo: TreeView - Binding to Flat Data
The following code snippet binds the TreeView to the collection of ChemicalElementGroup objects. Each object can have child objects. The code specifies the Children and Text mappings to adjust the TreeView data model to the specified data source.
<DxTreeView Data="@ChemicalElements.Groups"
@* ... *@
AnimationType="LayoutAnimationType.Slide">
<DataMappings>
<DxTreeViewDataMapping Children="Groups"
Text="Name"/>
</DataMappings>
</DxTreeView>
using System;
using System.Collections.Generic;
namespace BlazorDemo.Data {
public static class ChemicalElements {
private static readonly Lazy<List<ChemicalElementGroup>> chemicalElementGroups = new Lazy<List<ChemicalElementGroup>>(() => {
List<ChemicalElementGroup> groups = new List<ChemicalElementGroup>() {
new ChemicalElementGroup("Metals", new List<ChemicalElementGroup>() {
new ChemicalElementGroup("Alkali metals"),
new ChemicalElementGroup("Alkaline earth metals"),
new ChemicalElementGroup("Inner transition elements", new List<ChemicalElementGroup>() {
new ChemicalElementGroup("Lanthanides"),
new ChemicalElementGroup("Actinides")
}),
new ChemicalElementGroup("Transition elements"),
new ChemicalElementGroup("Other metals")
}),
new ChemicalElementGroup("Metalloids"),
new ChemicalElementGroup("Nonmetals", new List<ChemicalElementGroup>() {
new ChemicalElementGroup("Halogens"),
new ChemicalElementGroup("Noble gases"),
new ChemicalElementGroup("Other nonmetals")
})
};
return groups;
});
public static List<ChemicalElementGroup> Groups { get { return chemicalElementGroups.Value; } }
}
}
Run Demo: TreeView - Binding to Hierarchical Data
See Also