New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

TreeViewBuilder

Class

Defines the fluent interface for configuring the TreeView component.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Syntax:

public class TreeViewBuilder : WidgetBuilderBase<TreeView, TreeViewBuilder>, IHtmlString

Inheritance: objectWidgetBuilderBase<TreeView, TreeViewBuilder>TreeViewBuilder

Implements: IHtmlString

Constructors

TreeViewBuilder(TreeView)

Initializes a new instance of the TreeViewBuilder class.

public TreeViewBuilder(TreeView component)

Parameters:componentTreeView

The component.

Methods

Animation(Action<ExpandableAnimationBuilder>)

Configures the animation effects of the widget.

public TreeViewBuilder Animation(Action<ExpandableAnimationBuilder> animationAction)

Parameters:animationActionAction<ExpandableAnimationBuilder>

The action which configures the animation effects.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Animation(animation =&gt;
{
animation.Expand(open =&gt;
{
open.SlideIn(SlideDirection.Down);
});
})
)

Animation(bool)

Use to enable or disable animation of the TreeView.

public TreeViewBuilder Animation(bool enable)

Parameters:enablebool

The boolean value.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Animation(false) //toggle effect
)

AutoBind(bool)

Controls whether to bind the widget to the DataSource on initialization.

public TreeViewBuilder AutoBind(bool autoBind)

Parameters:autoBindboolReturns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.AutoBind(false)
)

AutoScroll(bool)

If set to true the widget will auto-scroll the containing element when the mouse/finger is close to the top/bottom of it.

public TreeViewBuilder AutoScroll(bool value)

Parameters:valuebool

The value that configures the autoscroll.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.AutoScroll(true)
)

BindTo(IEnumerable, Action<NavigationBindingFactory<TreeViewItem>>)

Binds the TreeView to a list of objects. The TreeView will create a hierarchy of items using the specified mappings.

public TreeViewBuilder BindTo(IEnumerable dataSource, Action<NavigationBindingFactory<TreeViewItem>> factoryAction)

Parameters:dataSourceIEnumerable

The data source.

factoryActionAction<NavigationBindingFactory<TreeViewItem>>

The action which will configure the mappings

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo(Model, mapping =&gt; mapping
.For&lt;Customer&gt;(binding =&gt; binding
.Children(c =&gt; c.Orders) // The "child" items will be bound to the "Orders" property
.ItemDataBound((item, c) =&gt; item.Text = c.ContactName) // Map "Customer" properties to TreeViewItem properties
)
.For&lt;Order&lt;(binding =&gt; binding
.Children(o =&gt; null) // "Orders" do not have child objects so return "null"
.ItemDataBound((item, o) =&gt; item.Text = o.OrderID.ToString()) // Map "Order" properties to TreeViewItem properties
)
)
)

BindTo(IEnumerable<TreeViewItemModel>)

Binds the TreeView to a list of items. Use if a hierarchy of items is being sent from the controller; to bind the TreeView declaratively, use the Items() method.

public TreeViewBuilder BindTo(IEnumerable<TreeViewItemModel> items)

Parameters:itemsIEnumerable<TreeViewItemModel>

The list of items

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo(model)
)

BindTo(string, Action<TreeViewItem, SiteMapNode>)

Binds the TreeView to a sitemap

public TreeViewBuilder BindTo(string viewDataKey, Action<TreeViewItem, SiteMapNode> siteMapAction)

Parameters:viewDataKeystring

The view data key.

siteMapActionAction<TreeViewItem, SiteMapNode>

The action to configure the item.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo("examples", (item, siteMapNode) =&gt;
{
})
)

BindTo(string)

Binds the TreeView to a sitemap.

public TreeViewBuilder BindTo(string viewDataKey)

Parameters:viewDataKeystring

The view data key.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo("examples")
)

BindTo<T>(IEnumerable<T>, Action<TreeViewItem, T>)

Binds the TreeView to a list of objects. The TreeView will be "flat" which means a TreeView item will be created for every item in the data source.

public TreeViewBuilder BindTo<T>(IEnumerable<T> dataSource, Action<TreeViewItem, T> itemDataBound)

Parameters:dataSourceIEnumerable<T>

The data source.

itemDataBoundAction<TreeViewItem, T>

The action executed for every data bound item.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo(new []{"First", "Second"}, (item, value) =&gt;
{
item.Text = value;
})
)

Checkboxes(Action<TreeViewCheckboxesBuilder>)

Configures the rendering of the checkboxes in the TreeView.

public TreeViewBuilder Checkboxes(Action<TreeViewCheckboxesBuilder> configure)

Parameters:configureAction<TreeViewCheckboxesBuilder>

The action that configures the checkboxes settings.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(config =&gt; config
.CheckChildren(true)
)
)

Checkboxes(bool)

Enables or disables the rendering of the checkboxes in the TreeView.

public TreeViewBuilder Checkboxes(bool enabled)

Parameters:enabledbool

A boolean value that toggles the rendering of the checkboxes.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(true)
)

CheckboxTemplate(string)

Defines the template that renders the checkboxes in the TreeView. The available fields in the template are:

item: The data item of the given node.
treeview: The TreeView options.

public TreeViewBuilder CheckboxTemplate(string template)

Parameters:templatestring

The value that configures the checkbox template.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes =&gt; checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplate("&lt;input type='checkbox' name='checkedFiles[#= item.id #]' value='true' /&gt;")
)

CheckboxTemplate<TModel>(TemplateBuilder<TModel>)

Defines the template that renders the checkboxes in the TreeView. The available fields in the template are:

item: The data item of the given node.
treeview: The TreeView options.

public TreeViewBuilder CheckboxTemplate<TModel>(TemplateBuilder<TModel> template)

Parameters:templateTemplateBuilder<TModel>

A Template component that configures the checkbox template.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes =&gt; checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplate(Html.Kendo().Template().AddHtml("&lt;input type='checkbox' name='checkedFiles[${data.item.id}]' value='true' /&gt;"))
)

CheckboxTemplateHandler(string)

Defines the template that renders the checkboxes in the TreeView. The available fields in the template are:

item: The data item of the given node.
treeview: The TreeView options.

public TreeViewBuilder CheckboxTemplateHandler(string template)

Parameters:templatestring

The JavaScript function that will return the checkbox template.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes =&gt; checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplateHandler("getCheckBoxTemplate")
)
&lt;script&gt;
function getCheckBoxTemplate(data) {
return `&lt;input type='checkbox' name='checkedFiles[${data.item.id}]' value='true' /&gt;`;
}
&lt;/script&gt;

CheckboxTemplateId(string)

Defines the template that renders the checkboxes in the TreeView. The available fields in the template are:

item: The data item of the given node.
treeview: The TreeView options.

public TreeViewBuilder CheckboxTemplateId(string templateId)

Parameters:templateIdstring

The "id" attribute of the external Kendo UI Template.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes =&gt; checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplateId("checkBoxTemplate")
)
&lt;script id="checkBoxTemplate" type="text/x-kendo-template"&gt;
&lt;input type='checkbox' name='checkedFiles[#= item.id #]' value='true' /&gt;
&lt;/script&gt;

CheckboxTemplateView(MvcHtmlString)

Defines the template that renders the checkboxes in the TreeView. The available fields in the template are:

item: The data item of the given node.
treeview: The TreeView options.

public TreeViewBuilder CheckboxTemplateView(MvcHtmlString template)

Parameters:templateMvcHtmlString

The Razor View that contains the checkbox template.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes =&gt; checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplateView(Html.Partial("TemplateView"))
)

DataIconField(params string[])

Sets the field of the data item that provides the icon name 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.

public TreeViewBuilder DataIconField(params string[] value)

Parameters:valuestring[]

The value that configures the dataiconfield.

Returns:

TreeViewBuilder

DataImageUrlField(string)

Sets the field of the data item that provides the image URL of the TreeView nodes.

public TreeViewBuilder DataImageUrlField(string value)

Parameters:valuestring

The value that configures the dataimageurlfield.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.DataImageUrlField("ImageUrl")
)

DataSource(Action<HierarchicalDataSourceBuilder<object>>)

Configure the DataSource of the component

public TreeViewBuilder DataSource(Action<HierarchicalDataSourceBuilder<object>> configurator)

Parameters:configuratorAction<HierarchicalDataSourceBuilder<object>>

The action that configures the DataSource.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.DataSource(dataSource =&gt; dataSource
.Read(read =&gt; read
.Action("Employees", "TreeView")
)
)
)

DataSource(string)

public TreeViewBuilder DataSource(string dataSourceId)

Parameters:dataSourceIdstringReturns:

TreeViewBuilder

DataSpriteCssClassField(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.

public TreeViewBuilder DataSpriteCssClassField(string value)

Parameters:valuestring

The value that configures the dataspritecssclassfield.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.DataSpriteCssClassField("SpriteCssClass")
)

DataTextField(params 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.

public TreeViewBuilder DataTextField(params string[] value)

Parameters:valuestring[]

The value that configures the datatextfield.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.DataTextField(new string[] { "CategoryName", "ProductName"})
)

DataUrlField(string)

Sets the field of the data item that provides the link URL of the nodes.

public TreeViewBuilder DataUrlField(string value)

Parameters:valuestring

The value that configures the dataurlfield.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.DataUrlField("DataUrlField")
)

DragAndDrop(Action<TreeViewDragAndDropBuilder>)

Allows disabling click move click interaction as an alternative of dragging. Disables (false) or enables (true) the click move click interaction as an alternative of dragging. The alternative is disabled by default.

public TreeViewBuilder DragAndDrop(Action<TreeViewDragAndDropBuilder> configure)

Parameters:configureAction<TreeViewDragAndDropBuilder>

Builder of the treeview drag & drop configuration.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.DragAndDrop(config =&gt; config
.ClickMoveClick(true)
)
)

DragAndDrop(bool)

Disables (false) or enables (true) drag-and-drop of the nodes. If configured as an object allows disabling click move click interaction as an alternative of dragging.

public TreeViewBuilder DragAndDrop(bool value)

Parameters:valuebool

If true, drag & drop is enabled.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Items(items =&gt;
{
items.Add().Text("First Item");
items.Add().Text("Second Item");
})
.DragAndDrop(true)
)

Events(Action<TreeViewEventBuilder>)

Configures the client-side events.

public TreeViewBuilder Events(Action<TreeViewEventBuilder> clientEventsAction)

Parameters:clientEventsActionAction<TreeViewEventBuilder>

The client events action.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Events(events =&gt;
.OnDataBinding("onDataBinding")
.OnItemDataBound("onItemDataBound")
)
)

ExpandAll(bool)

Expand all the items.

public TreeViewBuilder ExpandAll(bool value)

Parameters:valuebool

If true all the items will be expanded.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.ExpandAll(true)
)

HighlightPath(bool)

Select item depending on the current URL.

public TreeViewBuilder HighlightPath(bool value)

Parameters:valuebool

If true the item will be highlighted.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.HighlightPath(true)
)

ItemAction(Action<TreeViewItem>)

Callback for each item.

public TreeViewBuilder ItemAction(Action<TreeViewItem> action)

Parameters:actionAction<TreeViewItem>

Action, which will be executed for each item.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.ItemAction(item =&gt;
{
item
.Text(...)
.HtmlAttributes(...);
})
)

Items(Action<TreeViewItemFactory>)

Defines the items in the TreeView

public TreeViewBuilder Items(Action<TreeViewItemFactory> addAction)

Parameters:addActionAction<TreeViewItemFactory>

The add action.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Items(items =&gt;
{
items.Add().Text("First Item");
items.Add().Text("Second Item");
})
)

LoadOnDemand(bool)

Allows the treeview to fetch the entire datasource at initialization time.

public TreeViewBuilder LoadOnDemand(bool value)

Parameters:valuebool

Whether the datasource should be loaded on demand.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.LoadOnDemand(false)
)

Messages(Action<TreeViewMessagesSettingsBuilder>)

The text messages displayed in the widget. Use it to customize or localize the messages.

public TreeViewBuilder Messages(Action<TreeViewMessagesSettingsBuilder> configurator)

Parameters:configuratorAction<TreeViewMessagesSettingsBuilder>

The action that configures the messages.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.Messages(m =&gt; m.Loading("Root items are loading"))
)

SecurityTrimming(Action<SecurityTrimmingBuilder>)

Defines the security trimming functionality of the component

public TreeViewBuilder SecurityTrimming(Action<SecurityTrimmingBuilder> securityTrimmingAction)

Parameters:securityTrimmingActionAction<SecurityTrimmingBuilder>

The securityTrimming action.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.SecurityTrimming(builder =&gt;
{
builder.Enabled(true).HideParent(true);
})
)

SecurityTrimming(bool)

Enable/disable security trimming functionality of the component.

public TreeViewBuilder SecurityTrimming(bool value)

Parameters:valuebool

If true security trimming is enabled.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.SecurityTrimming(false)
)

Size(ComponentSize)

Sets the size of the component.

public TreeViewBuilder Size(ComponentSize value)

Parameters:valueComponentSize

The value that configures the size.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("treeview")
.Size(ComponentSize.Medium)
)

Template(string)

Defines the template for rendering each TreeView node.

public TreeViewBuilder Template(string template)

Parameters:templatestring

The value that configures the node template.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.Template("&lt;span&gt;#= item.text #&lt;/span&gt;")
)

Template<TModel>(TemplateBuilder<TModel>)

Defines the template for rendering each TreeView node.

public TreeViewBuilder Template<TModel>(TemplateBuilder<TModel> template)

Parameters:templateTemplateBuilder<TModel>

A Template component that configures the node template.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.Template(Html.Kendo().Template().AddHtml("&lt;span&gt;${data.item.text}&lt;/span&gt;"))
)

TemplateHandler(string)

Defines the template for rendering each TreeView node.

public TreeViewBuilder TemplateHandler(string template)

Parameters:templatestring

The JavaScript function that will return the template content.

Returns:

TreeViewBuilder

Example:

@(Html.Kendo().TreeView()
.Name("TreeView")
.TemplateHandler("getNodeTemplate")
)
&lt;script&gt;
function getNodeTemplate(data) {
return `&lt;span&gt;${data.item.text}&lt;/span&gt;`;
}
&lt;/script&gt;

TemplateId(string)

Defines the template for rendering each TreeView node.

public TreeViewBuilder TemplateId(string templateId)

Parameters:templateIdstring

The "id" attribute of the external Kendo UI Template.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.TemplateId("nodeTemplate")
)
&lt;script id="nodeTemplate" type="text/x-kendo-template"&gt;
&lt;span&gt;#= item.text #&lt;/span&gt;
&lt;/script&gt;

TemplateView(MvcHtmlString)

Defines the template for rendering each TreeView node.

public TreeViewBuilder TemplateView(MvcHtmlString template)

Parameters:templateMvcHtmlString

The Razor View that contains the node template.

Returns:

TreeViewBuilder

Example:

@( Html.Kendo().TreeView()
.Name("TreeView")
.TemplateView(Html.Partial("TemplateView"))
)