Edit this page

TreeView Migration

This article demonstrates the ASP.NET MVC server-side API for the Kendo UI TreeView widget.

Server-side API

Remote Data Binding


    <%= Html.Telerik().TreeView()
         .Name("TreeView")
         .DataBinding(dataBinding => dataBinding
             .Ajax().Select("_AjaxLoading", "TreeView")
         )
     %>

    <%= Html.Telerik().TreeView()
         .Name("TreeView")
         .DataSource(source => {
               source.Read(read =>
               {
                   read.Action("_AjaxLoading ", "TreeView");
               });
         })
     %>

Data Serialization

Data from the server must be serialized in the JSON format demonstrated in the example below.

Example
{
    id: String,
    text: String,
    url: String,
    imageUrl: String,
    spriteCssClass: String,
    hasChildren: Boolean
}

All fields are optional—skipping the text field shows the item with the text undefined. The text, url, imageUrl, or spriteCssClass field names can be changed through the DataTextField, DataUrlField, DataImageUrlField, or DataSpriteCssClassField fluent methods, as demonstrated in the example below.

Example
<%= Html.Kendo().TreeView()
     .Name("TreeView")
     .DataTextField("text")
     .DataSource(source => {
           source.Read(read =>
           {
               read.Action("_AjaxLoading ", "TreeView");
           });
     })
 %>

The above code allows the items to be serialized in the form below.

Example
{
    id: 2,
    text: "Andrew",
    hasChildren: true
}

Item-Posting Field Change

By default, the id field is posted to the server. To change the parameter name, use the Data handler.

Example
<%= Html.Kendo().TreeView()
    .Name("TreeView")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Employees", "TreeView")
            .Data("addData")
        )
    )
%>

<script>
    function addData(data) {
        return { employeeId: data.id };
    }
</script>

Value Field

The value field is removed. Depending on your use case, apply either of the approaches below.

  • If the value was used for load on demand, use the id field. The id will be inferred in the client-side dataSource and will be used when making requests for more data.
  • If the value was used to store arbitrary data, serialize it in a data-* attribute through the HtmlAttributes item, or if a DataSource is used, access the additional data through the dataItem client-side method.

Conditional Load on Demand

The conditional load on demand for some nodes can be achieved through using custom transport, as demonstrated in the article on mixing local data and remote binding.

Define the local transport by using the server-side wrappers in the way shown below.

Example
@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataSource(dataSource => dataSource
        .Custom().Transport(t => t.Read("onRead"))
    )
)

<script>
    function onRead(options) {
        options.success(
            // use fetched data
        )
    }
</script>

CheckBox Support

Use the checkboxes builder to render checkboxes or enable tri-state checkboxes.

Example
@(Html.Kendo().TreeView()
    .Name("TreeView")
    .Checkboxes(true)  // simple check boxes, posting an array of IDs
)

@(Html.Kendo().TreeView()
    .Name("TreeView")
    .Checkboxes(settings => settings
        .CheckChildren(true) // enables tri-state checkboxes, which check sub-nodes
    )
)

Conditional Checkboxes Display

This functionality requires a custom checkbox template, as demonstrated in the example below.

Example
@(Html.Kendo().TreeView()
    .Name("TreeView")
    .Checkboxes(settings => settings
        .Template(
            // Use conditional rendering
            "# if ('checkable' in item && item.checkable) { #" +
                "<input type='checkbox' #= item.checked ? 'checked' : '' #>" +
            "# } #"
        )
    )
)

For more information on this issue, refer to the article on how to hide checkboxes for root level.

Node Lines Display

The node-line functionality is not supported out of the box, but can be achieved through custom styling, as demonstrated in the article on how to show lines between nodes.

Client-Side API

Configuration

MVC Kendo UI
ajaxRequest Now removed. Use dataItem.children.read() after obtaining the dataItem through treeview.dataItem(node).
dataBind Now removed. Use treeview.dataSource.read() instead.
disable Now removed. Use treeview.enable(node, false) instead.
getItemText Now renamed. Use treeview.text(node).
getItemValue Now removed. Refer to the section on removed value fields.
findByValue Now removed. Refer to the section on removed value fields. An alternative is to use treeview.findByUid and access additional data in the related dataItem.
nodeCheck Now removed. Refer to the section on checkbox support.

Events

Apart from changing the event builders, the changes listed below are now introduced.

MVC Kendo UI
OnLoad Now removed. Use $(document).ready() instead.
OnChecked Now removed. Refer to the section on checkbox support.
OnDataBinding Now removed. Use the DataSource events instead.
OnDataBound Now removed. Use the DataSource events instead.
OnError Now removed. Use the DataSource events instead.
OnNodeDragStart Now renamed. Use the DragStart event.
OnNodeDragging Now renamed. Use the Drag event.
OnNodeDrop Now renamed. Use the Drop event.
OnNodeDropped Now renamed. Use the DragEnd event.

See Also

To see the articles on migrating Kendo UI controls from Telerik Extensions, browse the Widgets folder.