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

Question

我发现下面的代码会导致 "TypeError: (intermediate value).toLowerCase is not a function"，它似乎是由工具栏模板定义引起的，但相同的工具栏定义在 kendo 网格

中工作正常

$(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>' }
        ]
    });
});

请问有解决办法吗？（必须保留按钮图标）

Answer 1

经过搜索文档找到了解决方案，希望对遇到同样问题的人有所帮助。

根据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.

所以我改变这个：

toolbar: [ createToolBar ]

添加功能：

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>'
    ];
}

然后就可以了。

正如参考所说，如果我将 return 字符串数组直接放入工具栏配置，它会将数组呈现为两个 kendo 按钮，然后图标将丢失。

并且在这种情况下'href=\#'应该改为'href=#'，否则会采取重定向操作，我不知道原因。

Answer 2

使用点击处理程序创建工具栏的正确方法是：

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

工作原理如下：

name 必须是 custom，因为它不是内置命令。如果省略此属性，您将收到错误消息。
text: 想在按钮上显示什么
imageClass：你要显示的图标的class（隐含k-icon）
click：事件处理程序

我创建了一个 jsFiddle 来说明：https://jsfiddle.net/ueL8mrcr/

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

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

javascript

jquery

kendo-ui

kendo-treelist