TreeList

Example

Razor

<kendo-treelist>
    <column-menu></column-menu>
    <columns></columns>
    <editable></editable>
    <excel />
    <filterable />
    <messages />
    <pageable></pageable>
    <pdf></pdf>
    <search></search>
    <sortable />
    <toolbar></toolbar>
    <treelist-alt-row-template></treelist-alt-row-template>
    <treelist-datasource></treelist-datasource>
    <treelist-row-template></treelist-row-template>
    <treelist-toolbar-template></treelist-toolbar-template>
</kendo-treelist>

ChildTags

Tag Name	Details
column-menu	TreeListColumnMenuSettingsTagHelper
columns	TreeListColumnsTagHelper
editable	TreeListEditableSettingsTagHelper
excel	TreeListExcelSettingsTagHelper
filterable	TreeListFilterableSettingsTagHelper
messages	TreeListMessagesSettingsTagHelper
pageable	TreeListPageableSettingsTagHelper
pdf	TreeListPdfSettingsTagHelper
search	TreeListSearchSettingsTagHelper
sortable	TreeListSortableSettingsTagHelper
toolbar	TreeListToolbarsTagHelper
treelist-alt-row-template	TemplateTagHelper
treelist-datasource	TreeListDataSourceTagHelper
treelist-row-template	TemplateTagHelper
treelist-toolbar-template	TemplateTagHelper

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.
alt-row-template	String	The template which renders the alternating table rows. By default the treelist renders a table row (<tr>) for every data source item.
alt-row-template-handler	String	The template which renders the alternating table rows. By default the treelist renders a table row (<tr>) for every data source item. This option expects the name of a JavaScript function that will be called to return the template.
alt-row-template-id	String	The template which renders the alternating table rows. By default the treelist renders a table row (<tr>) for every data source item. This option expects the ID of the script element that contains the template.
alt-row-template-view	IHtmlContent	The template which renders the alternating table rows. By default the treelist renders a table row (<tr>) for every data source item. This option expects the instance containing the created HTML.
auto-bind	Boolean	If set to false, the TreeList will not bind to the specified DataSource during initialization. In this case, data binding will occur when the change event of the DataSource fires. By default, the TreeList will bind to the DataSource that is specified in the configuration.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
datasource-id	String	The Id of the data source.
height	Double	The height of the TreeList. Numeric values are treated as pixels.
navigatable	Boolean	If set to true, the user can navigate the widget with the keyboard. By default, keyboard navigation is disabled. For a runnable example, refer to the demo on keyboard navigation in the TreeList.
on-before-edit	String	The name of the JavaScript function that will handle the beforeEdit event. Fires when the user tries to edit or creates a data item before the editor is created. Can be used for preventing the editing depending on custom logic. The event handler function context (available through the this keyword) will be set to the widget instance. The event will be fired only when the TreeList is editable.
on-cancel	String	The name of the JavaScript function that will handle the cancel event. Fires when the user clicks the Cancel button (in inline or popup edit mode) or closes the popup window. The event handler function context (available through the this keyword) will be set to the widget instance.
on-cell-close	String	The name of the JavaScript function that will handle the cellClose event. Fires when the incell edit mode is used and the cell will be closed. The event is triggered after saving or canceling the changes but before the cell is closed. The event handler function context (available through the this keyword) will be set to the widget instance.
on-change	String	The name of the JavaScript function that will handle the change event. Fires when the user selects a table row or cell in the TreeList. The event handler function context (available through the this keyword) will be set to the widget instance.
on-collapse	String	The name of the JavaScript function that will handle the collapse event. Fires when an item is about to be collapsed. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-hide	String	The name of the JavaScript function that will handle the columnHide event. Fires when the user hides a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-lock	String	The name of the JavaScript function that will handle the columnLock event. Fires when the user lock a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-menu-init	String	The name of the JavaScript function that will handle the columnMenuInit event. Fires when the column menu is initialized. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-menu-open	String	The name of the JavaScript function that will handle the columnMenuOpen event. Fires when the column menu is opened. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-reorder	String	The name of the JavaScript function that will handle the columnReorder event. Fires when the user changes the order of a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-resize	String	The name of the JavaScript function that will handle the columnResize event. Fires when the user resizes a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-show	String	The name of the JavaScript function that will handle the columnShow event. Fires when the user shows a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-unlock	String	The name of the JavaScript function that will handle the columnUnlock event. Fires when the user unlock a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-data-binding	String	The name of the JavaScript function that will handle the dataBinding event. Fires before the widget binds to its data source. The event handler function context (available through the this keyword) will be set to the widget instance.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Fires when the widget is bound to data from its data source. The event handler function context (available through the this keyword) will be set to the widget instance.
on-drag	String	The name of the JavaScript function that will handle the dragstart event. (Available as of the 2015.3.1014 release) Fires when the user attempts to drag an item. If prevented, the item is not allowed to move. The event handler function context (available through the this keyword) will be set to the widget instance.
on-dragend	String	The name of the JavaScript function that will handle the dragend event. (Available as of the 2015.3.1014 release) Fires when the user finishes dragging an item and the model was updated. The event handler function context (available through the this keyword) will be set to the widget instance.
on-dragstart	String	The name of the JavaScript function that will handle the dragstart event. (Available as of the 2015.3.1014 release) Fires when the user attempts to drag an item. If prevented, the item is not allowed to move. The event handler function context (available through the this keyword) will be set to the widget instance.
on-drop	String	The name of the JavaScript function that will handle the drop event. (Available as of the 2015.3.1014 release) Fires when the user drops an item. If prevented, the source row will not be moved. The event handler function context (available through the this keyword) will be set to the widget instance.
on-edit	String	The name of the JavaScript function that will handle the edit event. Fires when the user edits or creates a data item. The event handler function context (available through the this keyword) will be set to the widget instance.
on-excel-export	String	The name of the JavaScript function that will handle the excelExport event. Fires when the user clicks the Export to Excel toolbar button.
on-expand	String	The name of the JavaScript function that will handle the expand event. Fires when an item is about to be expanded. The event handler function context (available through the this keyword) will be set to the widget instance.
on-filter-menu-init	String	The name of the JavaScript function that will handle the filterMenuInit event. Fires when the TreeList filter menu is initialized. The event handler function context (available through the this keyword) will be set to the widget instance.
on-filter-menu-open	String	The name of the JavaScript function that will handle the filterMenuOpen event. Fires when the TreeList filter menu is opened. The event handler function context (available through the this keyword) will be set to the widget instance.
on-pdf-export	String	The name of the JavaScript function that will handle the pdfExport event. Fires when the user clicks the Export to PDF toolbar button.
on-remove	String	The name of the JavaScript function that will handle the remove event. Fires when the user clicks the Destroy command button. The event handler function context (available through the this keyword) will be set to the widget instance.
on-save	String	The name of the JavaScript function that will handle the save event. Fires when a data item is saved. The event handler function context (available through the this keyword) will be set to the widget instance.
on-save-changes	String	The name of the JavaScript function that will handle the saveChanges event. Fires when the user clicks the Save command button. The event handler function context (available through the this keyword) will be set to the widget instance.
reorderable	Boolean	If set to true, the user can reorder the columns by dragging their header cells. By default, reordering is disabled.
resizable	Boolean	If set to true, the user can resize columns by dragging their header borders. By default, resizing is disabled.
row-template	String	The template which renders rows. By default renders a table row (<tr>) for every data source item.
row-template-handler	String	The template which renders rows. By default renders a table row (<tr>) for every data source item. This option expects the name of a JavaScript function that will be called to return the template.
row-template-id	String	The template which renders rows. By default renders a table row (<tr>) for every data source item. This option expects the ID of the script element that contains the template.
row-template-view	IHtmlContent	The template which renders rows. By default renders a table row (<tr>) for every data source item. This option expects the instance containing the created HTML.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
scrollable	Boolean	If set to true, the TreeList will display a scrollbar when the total row height or width exceeds the TreeList height or width. By default, scrolling is enabled. Scrolling renders separate tables for the header and data area. For accessibility-conscious applications, disable scrolling.
selectable	String	Specifies the selection type of the treelist