我还需要做什么才能使 kendo 网格的自定义工具栏命令起作用？

Question

我需要将自定义 toolbar command 添加到我的 kendo-grid 中，所以我搜索了 kendo-ui 关于 grid#configuration-toolbar 的文档，我发现：

If an Array value is assigned (to a toolbar property), it will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").

并且我为我的工具栏创建了一个自定义命令（在这个问题 Adding custom button to KendoGrid Toolbar Issue 中也提出了建议）

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

为单击事件处理程序添加了一个额外的属性，如命令文档中所述 columns.command.click Function:

The JavaScript function executed when the user clicks the command button. The function receives a jQuery Event as an argument.

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

你知道我在这里错过了什么吗？

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

$("#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 for custom toolbar command

Answer 1

我找到了解决办法。由于一些奇怪的未记录的原因，toobar 命令与 column 命令不同，不能以相同的方式自定义。它们唯一的共同点是工具栏命令可以调用列命令。工具栏好像没有点击事件:

$("#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"
        }],        
    }
});

demo at 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');
});

demo at jsfiddle

我还需要做什么才能使 kendo 网格的自定义工具栏命令起作用？

What else do I need to make kendo grid's custom toolbar command work?

jquery

kendo-ui

kendo-grid