Appearance
In this article, you will find information about the styling options and rendering of the Kendo UI TreeView.
For a live example, visit the Appearance Demo of the TreeView.
Size
The Kendo UI TreeView supports the size style option. The size option controls the overall size of the component. The structure of the class is k-input-{size}.
The following values are available for the size option:
-
sm—small size -
md—medium size -
lg—large size -
none—unset
The default size value is medium and it is applied to the div wrapping element through the k-treeview-md class.
The example below shows a basic configuration and how to set size to "large":
<input id="treeview" />
<script>
$("#treeview").kendoTreeView({
size: "large"
});
</script>
Below is the HTML that is affected from the configuration. The changes are applied to the div.k-treeview wrapping element:
<span class="k-treeview k-treeview-lg">
...
</span>
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.