Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 41 additions & 41 deletions components/treeview/data-binding/hierarchical-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ position: 2
# Treeview Data Binding to Hierarchical Data

This article explains how to bind the TreeView for Blazor to hierarchical data.
@[template](/_contentTemplates/treeview/basic-example.md#data-binding-basics-link)

@[template](/_contentTemplates/treeview/basic-example.md#data-binding-basics-link)

Hierarchical data means that the child items are provided in a property of the parent item. By default, the TreeView expects this property to be called `Items`, otherwise set the property name in the `ItemsField` parameter. If a certain node has children, it will render an expand icon. The `HasChildren` model property can override this, but it is not required for hierarchical data binding.
Hierarchical data means that the child items are provided in a property of the parent item. By default, the TreeView expects this property to be called `Items`, otherwise set the property name in the `ItemsField` parameter. If a certain node has non-`null` child items collection, it will render an expand icon. The `HasChildren` model property can override this, but it is not required for hierarchical data binding.

The hierarchical data binding approach allows you have separate collections of data or different model types at each TreeView level. Note that the data binding settings are per level, so a certain level will always use the same bindings, regardless of the model they represent and their parent.

Expand All @@ -33,58 +33,58 @@ The example below uses two levels of hierarchy, but the same idea applies to any
Hierarchical data hold collections of the child items

<TelerikTreeView Data="@HierarchicalData" @bind-ExpandedItems="@ExpandedItems">
<TreeViewBindings>
<TreeViewBinding TextField="Category" ItemsField="Products" />
<TreeViewBinding Level="1" TextField="ProductName" />
</TreeViewBindings>
<TreeViewBindings>
<TreeViewBinding TextField="Category" ItemsField="Products" />
<TreeViewBinding Level="1" TextField="ProductName" />
</TreeViewBindings>
</TelerikTreeView>

@code {
public IEnumerable<ProductCategoryItem> HierarchicalData { get; set; }
public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();
public IEnumerable<ProductCategoryItem> HierarchicalData { get; set; }
public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

public class ProductCategoryItem
{
public string Category { get; set; }
public List<ProductItem> Products { get; set; }
}

public class ProductItem
{
public string ProductName { get; set; }
}
public class ProductCategoryItem
{
public string Category { get; set; }
public List<ProductItem> Products { get; set; }
}

public class ProductItem
{
public string ProductName { get; set; }
}

protected override void OnInitialized()
{
LoadHierarchical();
ExpandedItems = HierarchicalData.Where(x => x.Products != null && x.Products.Any()).ToList();
}

private void LoadHierarchical()
{
List<ProductCategoryItem> roots = new List<ProductCategoryItem>();
protected override void OnInitialized()
{
LoadHierarchical();
ExpandedItems = HierarchicalData.Where(x => x.Products != null && x.Products.Any()).ToList();
}

List<ProductItem> firstCategoryProducts = new List<ProductItem>()
private void LoadHierarchical()
{
new ProductItem { ProductName= "Category 1 - Product 1" },
new ProductItem { ProductName= "Category 1 - Product 2" }
};
List<ProductCategoryItem> roots = new List<ProductCategoryItem>();

roots.Add(new ProductCategoryItem
{
Category = "Category 1",
Products = firstCategoryProducts // this is how child items are provided
List<ProductItem> firstCategoryProducts = new List<ProductItem>()
{
new ProductItem { ProductName= "Category 1 - Product 1" },
new ProductItem { ProductName= "Category 1 - Product 2" }
};

});
roots.Add(new ProductCategoryItem
{
Category = "Category 1",
Products = firstCategoryProducts // this is how child items are provided

roots.Add(new ProductCategoryItem
{
Category = "Category 2" // we will set no other properties and it will not have children, nor will it be expanded
});
});

HierarchicalData = roots;
}
roots.Add(new ProductCategoryItem
{
Category = "Category 2" // we will set no other properties and it will not have children, nor will it be expanded
});

HierarchicalData = roots;
}
}
````

Expand Down
2 changes: 1 addition & 1 deletion components/treeview/data-binding/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ The above model properties have the following meaning for the TreeView:
| **Item relations** | |
| `HasChildren` | Determines whether the item has children, no matter if they are loaded or not. Required for binding to **flat data** and for [**load on demand**]({%slug components/treeview/data-binding/load-on-demand%}). If `true`, the item will show an expand arrow. With **hierarchical data**, the TreeView renders expand icons based on `Items`, but `HasChildren` will take precedence. |
| `ParentId` | Identifies the item's parent. Required for binding to **flat data**. Set to `null` for root items. **Do not use `ParentId` with hierarchical data.** |
| `Items` | Defines the item's children. Required for [binding to **hierarchical data**]({%slug components/treeview/data-binding/hierarchical-data%}). The children's type can be different from the parent item type. |
| `Items` | Defines the item's children. Required for [binding to **hierarchical data**]({%slug components/treeview/data-binding/hierarchical-data%}). The children's type can be different from the parent item type. The TreeView will render an expand arrow on the parent node if its child `Items` collection is not `null`. Also see `HasChildren`. |
| [**Graphics**]({%slug treeview-icons%}) | |
| `Icon` | Defines a [Telerik Font and Svg icon]({%slug common-features-icons%}) |
| [**Navigation**]({%slug treeview-navigation%}) | |
Expand Down
Loading