Toolbar template

[Ronald]

Hi,

I was wondering if there is a way to accomplish the toolbar functionality in a TreeList as shown for this example in a Grid: Grid / Toolbar template

We need a filtering textbox in the toolbar, that filters the items when the input has changed.

 In the pages with Grid's I use buttons with icons from Font Awesome in the Toolbar, in the TreeList I only seem to be able to add buttons via Custom:

 

.Toolbar(toolbar =>
    {
        toolbar.Custom().Name("addfieldbutton").Text("Veld toevoegen");
        toolbar.Custom().Name("addfolderbutton").Text("Folder toevoegen");
    })

 

It would be nice to keep the design the same when using a TreeList.

 Here's my Toolbar for a grid.

 

.ToolBar(toolbar =>
{
    toolbar.Template(
        @<text>
            @(Html.Kendo().Button()
                .Name("ButtonAddProperty")
                .HtmlAttributes(new { type = "k-button" })
                .Content("Property toevoegen")
                .SpriteCssClass("fa fa-plus")
                .Events(e => e.Click("onCreateProperty"))
            )
        </text>);
})

 

Best regards,

Ronald

 

[Dimiter Madjarov]

Hello Ronald,

Currently the UI for ASP.NET MVC TreeList does not have an option to define a toolbar template. I have logged this issue for fixing. Please excuse us for the inconvenience.

Regards,
Dimiter Madjarov
Telerik

[Bryon]

Is there any word about this being a possibility now, or any way to apply a TemplateId at least, like on the cells?

[Tsvetina]

Hi Bryon,

Such setting has not been added yet to the MVC TreeList. There is a feature request opened in the feedback portal that you can vote for:
TreeList ToolBar Template

The more highly demanded features like client-side paging, multi-column headers and in-cell editing were added with the last release.

Regards,
Tsvetina
Progress Telerik

[Chris]

You can work around this long standing deficiency with the TreeList MVC widget by using the Toolbar capability that currently exists with the TreeList widget and inserting a placeholder button.  Then, when the document is ready, you can use jQuery to replace the placeholder button. 

This widget is incredibly useful, but sadly continues to suffer from neglect at least w.r.t. using templates and some other base functionality that should quite simply work as it does with the Grid widget.  At the very least, it should support using the setOptions() function to "set" the toolbar option using kendo.template() of the TreeList widget via jQuery.  For instance, this should work:

treeList.setOptions({
    toolbar: kendo.template($("#toolbarTemplate).html())
});

Below are snippets that I am using with Kendo UI ASP.NET MVC 2022 R2 to customize the TreeList Toolbar.  I do not know if it will work with previous versions of the Kendo UI ASP.NET MVC library.

First define the content that you want to use in the toolbar.  I chose to use the kendo template format to prepare for the day that this widget gets toolbar template capability.

<script type="text/x-kendo-template" id="toolbarTemplate">
    <button type="button" data-command="collapseallnodes" class="k-button k-button-md k-rounded-md k-button-solid undefined k-button-solid-base p-1" title="Collapse all nodes">
    <span class="k-icon k-button-icon k-icon k-i-collapse fg-light m-0 p-0 k-action-collapse-all-nodes"></span>
    <span type="span" class="k-button-text"> </span>
    </button>
    <button type="button" data-command="expandallnodes" class="k-button k-button-md k-rounded-md k-button-solid undefined k-button-solid-base p-1" title="Expand all nodes">
    <span class="k-icon k-button-icon k-icon k-i-expand fg-light m-0 p-0 k-action-expand-all-nodes"></span>
    <span type="span" class="k-button-text"> </span>
    </button>
    <button type="button" data-command="treelisttoolbartitle" class="k-button k-button-md k-rounded-md k-button-solid undefined k-button-solid-base bg-transparent ml-2 mr-5 bold">
    <span class="k-icon k-button-icon k-text-toolbar-title"></span>
    <span type="span" class="k-button-text">Optional Tree View Title</span>
    </button>
    <button type="button" data-command="treelistdeleteallrows" class="k-button k-button-md k-rounded-md k-button-solid undefined k-button-solid-base k-bg-error" title="Delete all bill of material rows from the UniFormat Number Element tree">
    <span class="k-icon k-button-icon k-icon k-i-trash"></span>
    <span type="span" class="k-button-text">Delete all rows</span>
    </button>
    <span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid k-grid-search">
        <span class="k-input-icon k-icon k-i-search"></span>
        <input autocomplete="off" placeholder="Search..." title="Search..." class="k-input-inner">
    </span>
</script>

Next, create a function that will do the work.

var setTreeListToolbar = function() {
	console.log(fnPrefix + "setTreeListToolbar()");
	try {
		const treelistToolbarPlaceholderEle = $('[data-command="treelist-toolbar-placeholder"]').first();
		treelistToolbarPlaceholderEle.replaceWith($("#toolbarTemplate").html());
	} catch (ex) {
		console.log("error: " + ex.message);
	}
}

Next add the Toolbar with placeholder to the MVC Kendo().TreeList widget.

@(Html.Kendo().TreeList<YourClassNameHere>()
	.Name("YourWidgetNameAndId")
	.HtmlAttributes(new { @style="height:calc(100vh - 260px); min-height:200px;", @class="put-some-class-names-here" })
	.Toolbar(toolbar =>
	{
	    toolbar.Custom().Name("treelist-toolbar-placeholder").Text(" ");//this will be replaced in setTreelistToolbar()
	})//Note that you could have hybridized by adding toolbar items here and included the placeholder, in which case only the placeholder would be replaced.
        ... etc
)

Finally, call the function after the TreeList widget has been rendered.

<script>
    $(document).ready(function () {
        setTreeListToolbar();
    });
</script>

 

Additionally, since this widget does not support HtmlAttributes for the toolbar items, you can customize the look and feel of the toolbar items by adding class, style and event handlers directly in the template (see step 1).  However, if you use the .Toolbar() function of the TreeList widget, you can use jQuery to do it by adding the following code to the function that gets executed when the document is ready and after the setTreeListToolbar() function has completed.  Note that the event handlers have not been included in this post as it is already getting pretty long winded.

//attempt to wire up the onclick event and force the tree list button with image k-i-trash to have the ".red.btn" css classes because Telerik has not properly supported the TreeList widget.
$("span.k-i-trash").parents('button').addClass("k-bg-error ml-5");
$("span.k-i-trash").parents('button').prop("title", "Delete all rows");
$("span.k-i-trash").parents('button').click(function () {onDeleteAllItemsTreeList(); void (0); return false; });
//.k-action-expand-all-nodes
$("span.k-action-expand-all-nodes").parents('button').addClass("p-1");
$("span.k-action-expand-all-nodes").parents('button').prop("title", "Expand all nodes");
$("span.k-action-expand-all-nodes").parents('button').click(function () { onClickExpandAllTreeList(); void (0); return false; });
//.k-action-collapse-all-nodes
$("span.k-action-collapse-all-nodes").parents('button').addClass("p-1");
$("span.k-action-collapse-all-nodes").parents('button').prop("title", "Collapse all nodes");
$("span.k-action-collapse-all-nodes").parents('button').click(function () { onClickCollapseAllTreeList(); void (0); return false; });
//.k-text-toolbar-title
$("span.k-text-toolbar-title").parents('button').addClass("bg-transparent ml-3 mr-5 bold");