Appearance
In this article, you will find information about the rendering and styling options of the Telerik UI for ASP.NET Core TreeView.
For a live example, refer to the Appearance Demo of the TreeView.
Size
The Size option controls the overall size of the TreeView. The k-treeview-{size} class, which is applied to the wrapping div element of the TreeView, reflects the value of the Size option.
The following values are available for the Size option:
-
Small—small size (applies thek-treeview-smclass to the wrapping div element) -
Medium—medium size (applies thek-treeview-mdclass to the wrapping div element) -
Large—large size (applies thek-treeview-lgclass to the wrapping div element) -
None—unset.
The default size value is Medium.
The example below shows a basic TreeView configuration and how to set Size to Large:
@(Html.Kendo().TreeView()
.Name("treeview")
.Size(ComponentSize.Large)
.Items(items =>
{
items.Add().Text("Item 1").Expanded(true)
.Items(subItems =>
{
subItems.Add().Text("Item 1.1");
subItems.Add().Text("Item 1.2");
subItems.Add().Text("Item 1.3");
});
items.Add().Text("Item 2")
.Items(subItems =>
{
subItems.Add().Text("Item 2.1");
subItems.Add().Text("Item 2.2");
subItems.Add().Text("Item 2.3");
});
items.Add().Text("Item 3");
})
)
<kendo-treeview name="treeview" size="ComponentSize.Large">
<items>
<treeview-item expanded="true" text="Item 1">
<items>
<treeview-item text="Item 1.1"></treeview-item>
<treeview-item text="Item 1.2"></treeview-item>
<treeview-item text="Item 1.3"></treeview-item>
</items>
</treeview-item>
<treeview-item text="Item 2">
<items>
<treeview-item text="Item 2.1"></treeview-item>
<treeview-item text="Item 2.2"></treeview-item>
<treeview-item text="Item 2.3"></treeview-item>
</items>
</treeview-item>
<treeview-item text="Item 3"></treeview-item>
</items>
</kendo-treeview>
Below is the HTML that is affected by the Size option. The changes are applied to the div.k-treeview wrapping element:
<div id="treeview" data-role="treeview" class="k-treeview k-treeview-lg" tabindex="0" aria-busy="false">
...
</div>
Rendering
Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the Components Rendering Overview article.
To review the latest rendering of the component, refer to the HTML specifications in the Kendo UI Themes Monorepo. The tests folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.