KendoUI add treelist toolbar template causes "TypeError: (intermediate value).toLowerCase is not a function"

1
votes

I found that the belowing code will cause a "TypeError: (intermediate value).toLowerCase is not a function", it seems that its caused by the toolbar template definition, but the same toolbar definition works fine in kendo grid

$(document).ready(function(){
    $("#treelist").kendoTreeList({
        columns: [
            { field: "Name" },
            { field: "Position" }
        ],
        dataSource: {
            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" }
            ],                
        },
        toolbar: [
            { template: '<a class="k-button" onclick="customSave(this)" href="\\#"><span class="k-icon k-i-tick"></span>custom save</a>' },
            { template: '<a class="k-button" onclick="customCancel(this)" href="\\#"><span class="k-icon k-i-cancel"></span>custom cancel</a>' }
        ]
    });
});

Is there any solution to slove this?(The button icon must be retained)

2
javascriptjquerykendo-uikendo-treelist

2 Answers

1
votes

The proper way to create a toolbar with a click handler is:

toolbar: [
    {
        name: 'custom',
        text: 'custom save', 
        imageClass: 'k-i-tick', 
        click: customSave
    }, 
    {
        name: 'custom',
        text: 'custom cancel', 
        imageClass: 'k-i-cancel', 
        click: customCancel
    },
]

Here how it works:

  • name must be custom, because it's not a built-in command. If this attribute is omitted, you'll get an error.
  • text: whatever you want to display on the button
  • imageClass: the class of the icon you want to display (k-icon is implied)
  • click: the event handler

I've created a jsFiddle to illustrate: https://jsfiddle.net/ueL8mrcr/

1
votes

After searching the document I found out the solution, hope it helps someone who meet the same issue.

Accroding to this:

If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole treelist Toolbar, and the string value will be passed as an argument to a kendo.template() function.If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the treelist Toolbar contents.If an Array value is assigned, it will be treated as the list of commands displayed in the treelist Toolbar.

So I change this:

toolbar: [ createToolBar ]

Add the function:

function createToolbar() {
    return [
        '<a class="k-button" href="#" onclick="customSave(this)"><span class="k-icon k-i-tick"></span>custom save</a>',
        '<a class="k-button" href="#" onclick="customCancel(this)"><span class="k-icon k-i-cancel"></span>custom cancel</a>'
    ];
}

Then it works.

And just as the reference said, if I put the return string array directly to toolbar configuration, it will render the array as two kendo button and then the icons will be lost.

And in this case the 'href=\\#' should change to 'href=#', otherwise it will take a redirect action, I don't know the reason.