docs(treeview): Clarify Items nullability (#2533)

This commit is contained in:
Dimo Dimov 2024-11-15 12:02:57 +02:00 коммит произвёл GitHub
Родитель 54f55ee88e
Коммит 1d837a54e6
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
2 изменённых файлов: 46 добавлений и 46 удалений

Просмотреть файл

@ -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)
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.
@ -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; }
}
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>();
List<ProductItem> firstCategoryProducts = new List<ProductItem>()
public class ProductCategoryItem
{
new ProductItem { ProductName= "Category 1 - Product 1" },
new ProductItem { ProductName= "Category 1 - Product 2" }
};
public string Category { get; set; }
public List<ProductItem> Products { get; set; }
}
roots.Add(new ProductCategoryItem
{
Category = "Category 1",
Products = firstCategoryProducts // this is how child items are provided
public class ProductItem
{
public string ProductName { get; set; }
}
});
roots.Add(new ProductCategoryItem
{
Category = "Category 2" // we will set no other properties and it will not have children, nor will it be expanded
});
protected override void OnInitialized()
{
LoadHierarchical();
ExpandedItems = HierarchicalData.Where(x => x.Products != null && x.Products.Any()).ToList();
}
HierarchicalData = roots;
}
private void LoadHierarchical()
{
List<ProductCategoryItem> roots = new List<ProductCategoryItem>();
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;
}
}
````

Просмотреть файл

@ -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%}) | |