Question

我发现下面的代码会导致“TypeError :(中间值）.toLowerCase不是函数”，它似乎是由工具栏模板定义引起的，但是相同的工具栏定义在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：

如果为工具栏配置选项指定了字符串值，则为它将被视为整个树形图的单个字符串模板工具栏和字符串值将作为参数传递给a kendo.template（）函数。如果分配了一个Function值（它可能是一个然后，kendo.template（）函数调用或泛型函数引用）函数的返回值将用于呈现树形图工具栏内容。如果指定了Array值，则将其视为 treelist工具栏中显示的命令列表。

所以我改变了这个：

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

然后它有效。

正如引用所说，如果我将返回字符串数组直接放到工具栏配置中，它会将数组渲染为两个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添加树形工具栏模板导致“TypeError :(中间值）.toLowerCase不是函数”

2 个答案: