TreeViewBuilder
Methods
AutoBind(System.Boolean)
Controls whether to bind the widget to the DataSource on initialization.
Parameters
autoBind - System.Boolean
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.AutoBind(false)
)
CheckboxTemplate(System.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.
Parameters
template - System.String
The value that configures the checkbox template.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplate("<input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />")
)
CheckboxTemplateId(System.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.
Parameters
templateId - System.String
The "id" attribute of the external Kendo UI Template.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplateId("checkBoxTemplate")
)
<script id="checkBoxTemplate" type="text/x-kendo-template">
<input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />
</script>
CheckboxTemplateView(System.Web.Mvc.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.
Parameters
template - System.Web.Mvc.MvcHtmlString
The Razor View that contains the checkbox template.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplateView(Html.Partial("TemplateView"))
)
CheckboxTemplateHandler(System.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.
Parameters
template - System.String
The JavaScript function that will return the checkbox template.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplateHandler("getCheckBoxTemplate")
)
<script>
function getCheckBoxTemplate(data) {
return `<input type='checkbox' name='checkedFiles[${data.item.id}]' value='true' />`;
}
</script>
CheckboxTemplate(Kendo.Mvc.UI.TemplateBuilder)
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.
Parameters
template - TemplateBuilder<TModel>
A Template component that configures the checkbox template.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.CheckboxTemplate(Html.Kendo().Template().AddHtml("<input type='checkbox' name='checkedFiles[${data.item.id}]' value='true' />"))
)
Template(System.String)
Defines the template for rendering each TreeView node.
Parameters
template - System.String
The value that configures the node template.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Template("<span>#= item.text #</span>")
)
TemplateId(System.String)
Defines the template for rendering each TreeView node.
Parameters
templateId - System.String
The "id" attribute of the external Kendo UI Template.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.TemplateId("nodeTemplate")
)
<script id="nodeTemplate" type="text/x-kendo-template">
<span>#= item.text #</span>
</script>
TemplateView(System.Web.Mvc.MvcHtmlString)
Defines the template for rendering each TreeView node.
Parameters
template - System.Web.Mvc.MvcHtmlString
The Razor View that contains the node template.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.TemplateView(Html.Partial("TemplateView"))
)
TemplateHandler(System.String)
Defines the template for rendering each TreeView node.
Parameters
template - System.String
The JavaScript function that will return the template content.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.TemplateHandler("getNodeTemplate")
)
<script>
function getNodeTemplate(data) {
return `<span>${data.item.text}</span>`;
}
</script>
Template(Kendo.Mvc.UI.TemplateBuilder)
Defines the template for rendering each TreeView node.
Parameters
template - TemplateBuilder<TModel>
A Template component that configures the node template.
Example
@(Html.Kendo().TreeView()
.Name("TreeView")
.Template(Html.Kendo().Template().AddHtml("<span>${data.item.text}</span>"))
)
Checkboxes(System.Boolean)
Enables or disables the rendering of the checkboxes in the TreeView.
Parameters
enabled - System.Boolean
A boolean value that toggles the rendering of the checkboxes.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(true)
)
Checkboxes(System.Action)
Configures the rendering of the checkboxes in the TreeView.
Parameters
configure - System.Action<TreeViewCheckboxesBuilder>
The action that configures the checkboxes settings.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Checkboxes(config => config
.CheckChildren(true)
)
)
Items(System.Action)
Defines the items in the TreeView
Parameters
addAction - System.Action<TreeViewItemFactory>
The add action.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Items(items =>
{
items.Add().Text("First Item");
items.Add().Text("Second Item");
})
)
Events(System.Action)
Configures the client-side events.
Parameters
clientEventsAction - System.Action<TreeViewEventBuilder>
The client events action.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Events(events =>
.OnDataBinding("onDataBinding")
.OnItemDataBound("onItemDataBound")
)
)
BindTo(System.String,System.Action)
Binds the TreeView to a sitemap
Parameters
viewDataKey - System.String
The view data key.
siteMapAction - System.Action<TreeViewItem,SiteMapNode>
The action to configure the item.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo("examples", (item, siteMapNode) =>
{
})
)
BindTo(System.String)
Binds the TreeView to a sitemap.
Parameters
viewDataKey - System.String
The view data key.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo("examples")
)
BindTo(System.Collections.Generic.IEnumerable)
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.
Parameters
items - System.Collections.Generic.IEnumerable<TreeViewItemModel>
The list of items
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo(model)
)
BindTo(System.Collections.Generic.IEnumerable,System.Action)
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.
Parameters
dataSource - System.Collections.Generic.IEnumerable<T>
The data source.
itemDataBound - System.Action<TreeViewItem,T>
The action executed for every data bound item.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo(new []{"First", "Second"}, (item, value) =>
{
item.Text = value;
})
)
BindTo(System.Collections.IEnumerable,System.Action)
Binds the TreeView to a list of objects. The TreeView will create a hierarchy of items using the specified mappings.
Parameters
dataSource - System.Collections.IEnumerable
The data source.
factoryAction - System.Action<NavigationBindingFactory>
The action which will configure the mappings
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.BindTo(Model, mapping => mapping
.For<Customer>(binding => binding
.Children(c => c.Orders) // The "child" items will be bound to the the "Orders" property
.ItemDataBound((item, c) => item.Text = c.ContactName) // Map "Customer" properties to TreeViewItem properties
)
.For<Order<(binding => binding
.Children(o => null) // "Orders" do not have child objects so return "null"
.ItemDataBound((item, o) => item.Text = o.OrderID.ToString()) // Map "Order" properties to TreeViewItem properties
)
)
)
ItemAction(System.Action)
Callback for each item.
Parameters
action - System.Action<TreeViewItem>
Action, which will be executed for each item.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.ItemAction(item =>
{
item
.Text(...)
.HtmlAttributes(...);
})
)
HighlightPath(System.Boolean)
Select item depending on the current URL.
Parameters
value - System.Boolean
If true the item will be highlighted.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.HighlightPath(true)
)
Animation(System.Boolean)
Use to enable or disable animation of the TreeView.
Parameters
enable - System.Boolean
The boolean value.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Animation(false) //toggle effect
)
Animation(System.Action)
Configures the animation effects of the widget.
Parameters
animationAction - System.Action<ExpandableAnimationBuilder>
The action which configures the animation effects.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Animation(animation =>
{
animation.Expand(open =>
{
open.SlideIn(SlideDirection.Down);
});
})
)
ExpandAll(System.Boolean)
Expand all the items.
Parameters
value - System.Boolean
If true all the items will be expanded.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.ExpandAll(true)
)
DragAndDrop(System.Boolean)
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.
Parameters
value - System.Boolean
If true, drag & drop is enabled.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.Items(items =>
{
items.Add().Text("First Item");
items.Add().Text("Second Item");
})
.DragAndDrop(true)
)
DragAndDrop(System.Action)
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.
Parameters
configure - System.Action<TreeViewDragAndDropBuilder>
Builder of the treeview drag & drop configuration.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.DragAndDrop(config => config
.ClickMoveClick(true)
)
)
SecurityTrimming(System.Boolean)
Enable/disable security trimming functionality of the component.
Parameters
value - System.Boolean
If true security trimming is enabled.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.SecurityTrimming(false)
)
SecurityTrimming(System.Action)
Defines the security trimming functionality of the component
Parameters
securityTrimmingAction - System.Action<SecurityTrimmingBuilder>
The securityTrimming action.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.SecurityTrimming(builder =>
{
builder.Enabled(true).HideParent(true);
})
)
DataSource(System.Action)
Configure the DataSource of the component
Parameters
configurator - System.Action<HierarchicalDataSourceBuilder>
The action that configures the DataSource.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Employees", "TreeView")
)
)
)
DataSource(System.String)
Parameters
dataSourceId - System.String
LoadOnDemand(System.Boolean)
Allows the treeview to fetch the entire datasource at initialization time.
Parameters
value - System.Boolean
Whether the datasource should be loaded on demand.
Example
@( Html.Kendo().TreeView()
.Name("TreeView")
.LoadOnDemand(false)
)
AutoScroll(System.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.
Parameters
value - System.Boolean
The value that configures the autoscroll.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.AutoScroll(true)
)
DataImageUrlField(System.String)
Sets the field of the data item that provides the image URL of the TreeView nodes.
Parameters
value - System.String
The value that configures the dataimageurlfield.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.DataImageUrlField("ImageUrl")
)
DataSpriteCssClassField(System.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.
Parameters
value - System.String
The value that configures the dataspritecssclassfield.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.DataSpriteCssClassField("SpriteCssClass")
)
DataUrlField(System.String)
Sets the field of the data item that provides the link URL of the nodes.
Parameters
value - System.String
The value that configures the dataurlfield.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.DataUrlField("DataUrlField")
)
Messages(System.Action)
The text messages displayed in the widget. Use it to customize or localize the messages.
Parameters
configurator - System.Action<TreeViewMessagesSettingsBuilder>
The action that configures the messages.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.Messages(m => m.Loading("Root items are loading"))
)
Size(Kendo.Mvc.UI.ComponentSize)
Sets the size of the component.
Parameters
value - ComponentSize
The value that configures the size.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.Size(ComponentSize.Medium)
)
DataTextField(System.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.
Parameters
value - System.String[]
The value that configures the datatextfield.
Example
@( Html.Kendo().TreeView()
.Name("treeview")
.DataTextField(new string[] { "CategoryName", "ProductName"})
)
ToComponent()
Returns the internal view component.
Name(System.String)
Sets the name of the component.
Parameters
componentName - System.String
The name of the component.
Example
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
Deferred(System.Boolean)
Suppress initialization script rendering. Note that this options should be used in conjunction with
Parameters
deferred - System.Boolean
ModelMetadata(System.Web.Mvc.ModelMetadata)
Uses the Metadata of the Model.
Parameters
modelMetadata - System.Web.Mvc.ModelMetadata
The metadata set for the Model
HtmlAttributes(System.Object)
Sets the HTML attributes.
Parameters
attributes - System.Object
The HTML attributes.
HtmlAttributes(System.Collections.Generic.IDictionary)
Parameters
attributes - System.Collections.Generic.IDictionary<String,Object>
AsModule(System.Boolean)
Specifies whether the initialization script of the component will be rendered as a JavaScript module.
Parameters
value - System.Boolean
Render()
Renders the component.
Example
@(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
@( Html.Kendo().Grid(Model)
.Name("grid")
.DetailTemplate(product => {
)
Product Details:
<div>Product Name: @( product.ProductName )</div>
<div>Units In Stock: @( product.UnitsInStock )</div>
@(
})
.Render();
)
ScriptAttributes(System.Object,System.Boolean)
Sets the JavaScript attributes to the initialization script.
Parameters
attributes - System.Object
The JavaScript attributes.
overrideAttributes - System.Boolean
Argument which determines whether attributes should be overriden.
ScriptAttributes(System.Collections.Generic.IDictionary,System.Boolean)
Sets the JavaScript attributes to the initialization script.
Parameters
attributes - System.Collections.Generic.IDictionary<String,Object>
The JavaScript attributes.
overrideAttributes - System.Boolean
Argument which determines whether attributes should be overriden.