TreeView

Example

Razor

<kendo-treeview>
    <animation></animation>
    <checkboxes></checkboxes>
    <drag-and-drop />
    <hierarchical-datasource></hierarchical-datasource>
    <item-template></item-template>
    <items></items>
    <messages />
</kendo-treeview>

ChildTags

Tag Name	Details
animation	TreeViewAnimationSettingsTagHelper
checkboxes	TreeViewCheckboxesSettingsTagHelper
drag-and-drop	TreeViewDragAndDropSettingsTagHelper
hierarchical-datasource	HierarchicalDataSourceTagHelper
item-template	TemplateTagHelper
items	TreeViewItemsTagHelper
messages	TreeViewMessagesSettingsTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
is-in-client-template	Boolean	When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
auto-bind	Boolean	If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.
auto-scroll	Boolean	If set to true the widget will auto-scroll the containing element when the mouse/finger is close to the top/bottom of it.
bind-to	IEnumerable<TreeViewItemBase>	Binds a list of items to the TreeView
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
data-image-url-field	String	Sets the field of the data item that provides the image URL of the TreeView nodes.
data-source-id	String	The Id of the data source.
data-sprite-css-class-field	String	Sets the field of the data item that provides the sprite CSS class of the nodes. If an array, each level uses the field that is at the same index in the array, or the last item in the array.
data-text-field	String	Sets the field of the data item that provides the text content of the nodes. If an array, each level uses the field that is at the same index in the array, or the last item in the array.
data-url-field	String	Sets the field of the data item that provides the link URL of the nodes.
drag-and-drop-enabled	Boolean	Disables (false) or enables (true) drag-and-drop of the nodes.
expand-all	Boolean	If set to true expands all nodes. Applicable when local data binding is used.
load-on-demand	Boolean	Indicates whether the child DataSources should be fetched lazily when parent groups get expanded. Setting this to false causes all child DataSources to be loaded at initialization time.
on-change	String	The name of the JavaScript function that will handle the change event. Triggered when the selection has changed (either by the user or through the select method).
on-check	String	The name of the JavaScript function that will handle the check event. Triggered after the user has checked or unchecked a checkbox. If checkChildren is true, the event is triggered after all checked states are updated. This event has been introduced in internal builds after 2014.2.828.
on-collapse	String	The name of the JavaScript function that will handle the collapse event. Triggered before a subgroup gets collapsed. Cancellable.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Triggered after the dataSource change event has been processed (adding/removing items);
on-drag	String	The name of the JavaScript function that will handle the drag event. Triggered while a node is being dragged.
on-dragend	String	The name of the JavaScript function that will handle the dragend event. Triggered after a node has been dropped.
on-dragstart	String	The name of the JavaScript function that will handle the dragstart event. Triggered before the dragging of a node starts.
on-drop	String	The name of the JavaScript function that will handle the drop event. Triggered when a node is being dropped.
on-expand	String	The name of the JavaScript function that will handle the expand event. Triggered before a subgroup gets expanded.
on-kendo-keydown	String	The name of the JavaScript function that will handle the kendoKeydown event. Triggered when the user presses a keyboard key while the TreeView is focused.
on-load-completed	String	The name of the JavaScript function that will handle the loadCompleted event. This event triggers only when loadOnDemand is set to false - it indicates that all nodes that need to be loaded are ready and present as data items in the DataSource of the TreeView.
on-navigate	String	The name of the JavaScript function that will handle the navigate event. Triggered when the user moves the focus on another node
on-select	String	The name of the JavaScript function that will handle the select event. Triggered when a node is being selected by the user. Cancellable.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
size	ComponentSize	Sets the size of the component.
template	String	Represents a collection of templates defined for the component.
template-handler	String	Template for rendering each node. This option expects the name of a JavaScript function that will be called to return the template.
template-id	String	Template for rendering each node. This option expects the ID of the script element that contains the template.
template-view	IHtmlContent	Template for rendering each node. This option expects the instance containing the created HTML.