Components / Data Management / TreeList

New to Telerik UI for ASP.NET Core? Download free 30-day trial

ToolBar

The ToolBar() configuration option of the TreeList lets you add command buttons that allow the user to invoke built-in TreeList functionalities, such as adding data items, saving changes, searching, and so on.

You can also define and add custom commands to the TreeList's ToolBar, further expanding its functionality. To customize the appearance of the ToolBar, you can utilize templates.

Built-In Commands

You can configure the ToolBar and include any of the built-in commands:

.ToolBar(toolbar=> {
        toolbar.Columns();
        toolbar.Create();
        toolbar.Save();
        toolbar.Paste();
        toolbar.Pdf();
        toolbar.Excel();
        toolbar.Search();
        toolbar.Spacer();
        toolbar.Separator();
    })

    <toolbar>
        <toolbar-button name="columns"></toolbar-button> 
        <toolbar-button name="create"></toolbar-button> 
        <toolbar-button name="save"></toolbar-button> 
        <toolbar-button name="paste"></toolbar-button>
        <toolbar-button name="pdf"></toolbar-button>
        <toolbar-button name="excel"></toolbar-button>
        <toolbar-button name="search"></toolbar-button>
        <toolbar-button name="spacer" type="spacer"></toolbar-button>
        <toolbar-button name="separator" type="separator"></toolbar-button>
    </toolbar>
Command Description Resources
Columns Displays a global column menu. Column menu documentation
Create Adds an empty data item to the TreeList. Editing functionality documentation
Save Persists any data changes done by the end user. Editing functionality documentation
Paste Enables the built-in paste operations. Clipboard documentation
Pdf Exports the TreeList data in PDF format. PDF Export documentation
Excel Exports the TreeList data in MS Excel format. Excel Export documentation
Search Adds the built-in search panel for the TreeList. Search Panel documentation
Spacer Moves the tools that are declared after it to the right side of the ToolBar. NA
Separator Acts as a delimiter between the ToolBar Commands. NA

Custom Commands

The Telerik UI for ASP.NET Core TreeList supports adding Custom Commands to its ToolBar. The following example demonstrates how to add a Custom Command to the ToolBar:

    .Toolbar(t =>
    {
        t.Custom(Html.Kendo().Template().AddComponent(c => c.Button()
               .Name("refresh")
               .Icon("arrow-rotate-cw")
               .HtmlAttributes(new { title = "Refresh" })
               .Events(ev => ev.Click("refresh"))));
        t.Spacer();
        t.Search();
    })

REPL example of a Custom Command in TreeList ToolBar HtmlHelper for ASP.NET Core

    <toolbar>
        <treelist-toolbar-button>
            <treelist-toolbar-command-template>
                <kendo-button name="iconButton" icon="arrow-rotate-cw" on-click="refresh"></kendo-button>
            </treelist-toolbar-command-template>
        </treelist-toolbar-button>
        <treelist-toolbar-button name="spacer" type="spacer" />
        <treelist-toolbar-button name="search" />
    </toolbar>

REPL example of a Custom Command in TreeList ToolBar TagHelper for ASP.NET Core

ToolBar Template Handler

Telerik UI for ASP.NET Core ToolBar introduces an overload that accept a JavaScript function name. It allows you to define the Template content through a client-side handler. This way, you can prevent the components from being dependent on the unsafe-eval and reuse the templates within multiple Components in different application pages.

    <script id="toolbar-template" type="text/x-kendo-template">
         <button id="refresh"></button>
         <span class="k-spacer"></span>
         <div class="toolBar">
            <label class="position-label" for="position">Filter by position:</label>
              <input type="search" id="position" style="width: 150px"/>
            </div>
        </div>
    </script>

    <script>
        function toolbarTemplate() {
            return $("#toolbar-template").html();
        }
    </script>

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .ToolbarTemplateHandler("toolbarTemplate")
        .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250).Title("First Name");
            columns.Add().Field(e => e.LastName).Title("Last Name");
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}").Filterable(false);
        })
        .Height(540)
        .DataSource(dataSource => dataSource
            .ServerOperation(false)
            .Read(read => read.Action("All", "EmployeeDirectory"))
            .Model(m =>
            {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
                m.Expanded(true);
            })
        )
    )

REPL example of a ToolBar Template Handler in TreeList HtmlHelper for ASP.NET Core

    @addTagHelper *, Kendo.Mvc
    <script>

        $(document).ready(function () {

            $("#refresh-button").click(function(){
                kendo.alert('refresh btn clicked')
            })
        })

        function toolbarTemplate() {
            return "<button id='refresh-button'>Refresh</button>";
        }
    </script>

<kendo-treelist name="treelist" height="540">
    <toolbar client-template-handler="toolbarTemplate"></toolbar>
    <columns>
        <treelist-column field="FirstName" width="250px"></treelist-column>
        <treelist-column field="LastName" width="160px"></treelist-column>
        <treelist-column field="Position"></treelist-column>
        <treelist-column field="Phone" width="200px"></treelist-column>
        <treelist-column field="Extension" width="140px"></treelist-column>
        <treelist-column field="Address"></treelist-column>
    </columns>
    <filterable enabled="true"/>
    <sortable enabled="true"/>
    <pageable enabled="true" page-size="15" page-sizes-enabled="true"/>
    <treelist-datasource server-operation="false">
        <transport>
            <read url="@Url.Action("All","EmployeeDirectory")"/>
        </transport>
        <schema data="Data" total="Total" errors="Errors">
            <treelist-model id="EmployeeId" parent-id="ReportsTo" expanded="true">
                <fields>
                    <field name="EmployeeId" type="number"></field>
                    <field name="ReportsTo" nullable="true"></field>
                    <field name="FirstName" type="string"></field>
                    <field name="LastName" type="string"></field>
                </fields>
            </treelist-model>
        </schema>
    </treelist-datasource>
</kendo-treelist>

REPL example of a ToolBar Template Handler in TreeList TagHelper for ASP.NET Core

ToolBar Template Id

Telerik UI for ASP.NET Core ToolBar introduces an overload that accepts the Id of a script as an Id for the ToolBar Template for the TreeList.

    <script id="toolBarTemplate" type="text/x-kendo-template">
         <button id="refresh"></button>
         <span class="k-spacer"></span>
         <div class="toolbar">
            <label class="position-label" for="position">Filter by position:</label>
              <input type="search" id="position" style="width: 150px"/>
            </div>
        </div>
    </script>

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .ToolbarTemplateId("toolBarTemplate")
        .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250).Title("First Name");
            columns.Add().Field(e => e.LastName).Title("Last Name");
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}").Filterable(false);
        })
        .Height(540)
        .DataSource(dataSource => dataSource
            .ServerOperation(false)
            .Read(read => read.Action("All", "EmployeeDirectory"))
            .Model(m =>
            {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
                m.Expanded(true);
            })
        )
    )

REPL example of a ToolBar Template Id in TreeList HtmlHelper for ASP.NET Core

@addTagHelper *, Kendo.Mvc

    <script id="toolbar-template" type="text/x-kendo-template">
         <button id="refresh"></button>
         <span class="k-spacer"></span>
         <div class="toolbar">
            <label class="position-label" for="position">Filter by position:</label>
              <input type="search" id="position" style="width: 150px"/>
            </div>
        </div>
    </script>

    <script>

        $(document).ready(function () {

            var treelist = $("#treelist").data("kendoTreeList");

            $("#refresh").kendoButton({
                icon: "arrow-rotate-cw",
                click: function () {
                    treelist.dataSource.read();
                }
            });
        })

    </script>

    <kendo-treelist name="treelist" height="540">
        <toolbar client-template-id="toolbar-template"></toolbar>
        <columns>
            <treelist-column field="FirstName" width="250px"></treelist-column>
            <treelist-column field="LastName" width="160px"></treelist-column>
            <treelist-column field="Position"></treelist-column>
            <treelist-column field="Phone" width="200px"></treelist-column>
            <treelist-column field="Extension" width="140px"></treelist-column>
            <treelist-column field="Address"></treelist-column>
        </columns>
        <filterable enabled="true"/>
        <sortable enabled="true"/>
        <pageable enabled="true" page-size="15" page-sizes-enabled="true"/>
        <treelist-datasource server-operation="false">
            <transport>
                <read url="@Url.Action("All","EmployeeDirectory")"/>
            </transport>
            <schema data="Data" total="Total" errors="Errors">
                <treelist-model id="EmployeeId" parent-id="ReportsTo" expanded="true">
                    <fields>
                        <field name="EmployeeId" type="number"></field>
                        <field name="ReportsTo" nullable="true"></field>
                        <field name="FirstName" type="string"></field>
                        <field name="LastName" type="string"></field>
                    </fields>
                </treelist-model>
            </schema>
        </treelist-datasource>
    </kendo-treelist>

REPL example of a ToolBar Template Id in TreeList TagHelper for ASP.NET Core

Next Steps

See Also

In this article
Related articles
Not finding the help you need? Improve this article