Using the API

The TreeList provides an API which enables you to use its methods, fields, and events.

Methods and Fields

The TreeList exposes a set of methods and fields.

Razor

    @(Html.Kendo().TreeList<dynamic>()
        .Name("treelist")
        .Columns(x=> {
            x.Add().Field("Name");
            x.Add().Field("Position");
        })
        .DataSource("dataSource")
        )

Razor

    <kendo-treelist datasource-id="dataSource" name="treelist">
        <columns>
            <treelist-column field="Name"></treelist-column>
            <treelist-column field="Position"></treelist-column>
        </columns>
    </kendo-treelist>

JavaScript

    <script>
        $(function () {
            // Get a reference to the kendo.ui.TreeList instance.
            var treelist = $("#treelist").data("kendoTreeList");

            // Use the expand method to expand the first row.
            treelist.expand($("#treelist tbody>tr:eq(0)"));T
        })

        var dataSource = new kendo.data.TreeListDataSource({
            data: [
                { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                { id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
                { id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
            ]

        })
    </script>

Events

The TreeList supports a set of events to which you can subscribe.

To handle the events, either:

• Specify the JavaScript function which will handle the event during the initialization of the widget, or
• Use the bind method of the widget after initialization.

The event handler is the JavaScript function which is invoked when the event is fired. The argument of the event handler is a JavaScript object which contains event-specific data. Get a reference of the widget, which fired the event, through the sender field of the event argument. The function context of the event handler, which is available through the this keyword, is set to the instance of the widget which fired the event.

The following example demonstrates how to subscribe to a TreeList event during the initialization of the widget.

Razor

    @(Html.Kendo().TreeList<dynamic>()
        .Name("treelist")
        .Columns(x =>
        {
            x.Add().Field("Name");
            x.Add().Field("Position");
        })
        .DataSource("dataSource")
        .Events(x=> x.DataBound("dataBound"))
    )

Razor

    <kendo-treelist datasource-id="dataSource" name="treelist" on-data-bound="dataBound">
        <columns>
            <treelist-column field="Name"></treelist-column>
            <treelist-column field="Position"></treelist-column>
        </columns>
    </kendo-treelist>

JavaScript

    <script>
        function dataBound(e) {
            console.log("dataBound");
        }

        var dataSource = new kendo.data.TreeListDataSource({
            data: [
                { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                { id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
                { id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
            ]
        });
    </script>

The following example demonstrates how to subscribe to a TreeList event by using the bind method.

Razor

    @(Html.Kendo().TreeList<dynamic>()
        .Name("treelist")
        .Columns(x =>
        {
            x.Add().Field("Name");
            x.Add().Field("Position");
        })
        .DataSource("dataSource")
    )

Razor

    <kendo-treelist datasource-id="dataSource" name="treelist">
        <columns>
            <treelist-column field="Name"></treelist-column>
            <treelist-column field="Position"></treelist-column>
        </columns>
    </kendo-treelist>

JavaScript

    <script>
        $(function () {
            $("#treelist").data("kendoTreeList").bind('dataBound', dataBound);
        });

        function dataBound(e) {
            console.log("dataBound");
        }

        var dataSource = new kendo.data.TreeListDataSource({
            data: [
                { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                { id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
                { id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
            ]
        })
    </script>

See Also

• Basic Usage of the TreeList HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the TreeList TagHelper for ASP.NET Core (Demo)

• Server-Side API