This is a migrated thread and some comments may be shown as answers.

Toolbar template

3 Answers 644 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Ronald
Top achievements
Rank 2
Ronald asked on 09 Jul 2015, 08:35 AM

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

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 13 Jul 2015, 07:48 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bryon
Top achievements
Rank 2
Iron
answered on 12 Nov 2018, 04:22 PM
Is there any word about this being a possibility now, or any way to apply a TemplateId at least, like on the cells?
0
Tsvetina
Telerik team
answered on 14 Nov 2018, 01:26 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Chris
Top achievements
Rank 1
Iron
commented on 20 May 2022, 09:24 PM | edited

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");


Tags
TreeList
Asked by
Ronald
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Bryon
Top achievements
Rank 2
Iron
Tsvetina
Telerik team
Share this question
or