还有什么我需要使kendo网格的自定义工具栏命令工作？

Question

我需要为我添加一个自定义toolbar command,kendo-grid所以我搜索了kendo-ui有关grid#configuration-toolbar我发现的位置的文档:

如果指定了一个Array值(对于工具栏属性),它将被视为网格工具栏中显示的命令列表.命令可以是自定义的或内置的("取消","创建","保存","excel","pdf").

我为我的工具栏创建了一个自定义命令(在此问题中也建议将自定义按钮添加到KendoGrid工具栏问题)

toolbar: [
    {
        name: "copyRows",
        text: "Copy Rows",
        click: function (e) {
            alert('test');
        }
    },
],

具有click事件处理程序的附加属性,如命令columns.command.click的文档中所述.

用户单击命令按钮时执行的JavaScript函数.该函数接收jQuery事件作为参数.

...但是它不会触发click事件并且警报不会显示.

你知道我在这里缺少什么吗？

我测试的完整代码如下所示:

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    }, ],
    editable: true,
    toolbar: [{
        name: "create",
        text: "New Row"
    }, {
        name: "copyRows",
        text: "Copy Rows",
        click: function (e) {
            alert('test');
        }
    }, ],
    dataSource: {
        data: [{
            name: "Jane Doe"
        }],        
    }
});

自定义工具栏命令的jsfiddle

Answer 1

我找到了解决方案.对于一些奇怪的未记录的原因,toobar命令与列命令不是相同的命令,并且不能以相同的方式自定义.他们唯一的共同点是工具栏命令可以调用列命令.工具栏中似乎没有点击事件:

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    },{
        command: [{
        name: "customCommand",
        text: "Column Command",
        click: function(e){
            alert('Column Command');
        }
    }]
    } ],
    editable: true,
    toolbar: [{
        name: "create",
        text: "New Row"
    }, {
        // This actually calls the column command with the same name.
        name: "customCommand",
        text: "Toolbar Command",
        // The click event never gets fired.
        click: function (e) {
            alert('Toolbar Command');
        }
    }, ],
    dataSource: {
        data: [{
            name: "Jane Doe"
        }],        
    }
});

在jsfiddle演示

但我不希望有一个额外的按钮,每行中仅使工具栏命令工作,使该解决方案是使用自定义模板具有自定义事件处理程序的工具栏:

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    }],
    editable: true,
    toolbar: [{
        template:
            '<a class="k-button k-button-icontext k-grid-add" href="\\#"><span class="k-icon k-add"></span>New Row</a>' +
            '<a class="k-button k-grid-custom-command" href="\\#">Toolbar Command</a>'
    }],
    dataSource: {
        data: [{
            name: "Jane Doe"
        }],
    }
});

$('a.k-grid-custom-command').click(function (e) {
    alert('Toolbar Command');
});

在jsfiddle演示