分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 我还需要什么来使kendo网格的自定义工具栏命令工作？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我需要向我的kendo-grid添加一个自定义工具栏命令,所以我搜索了关于 grid#configuration-toolbar的kendo-ui文档,我发现了： @H_404_7@

@H_404_7@

@H_404_7@我为我的工具栏创建了一个自定义命令(在此问题Adding custom button to KendoGrid Toolbar Issue中也有建议)

@H_404_7@

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

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

@H_404_7@

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

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

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

@H_404_7@

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    },editable: true,toolbar: [{
        name: "create",text: "New Row"
    },{
        name: "copyRows",data@R_874_9016@e: {
        data: [{
            name: "Jane Doe"
        }],}
});

@H_404_7@jsfiddle for custom toolbar command

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

@H_404_7@

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    },{
        command: [{
        name: "cus@R_673_10608@ommand",text: "column Command",click: function(E){
            alert('column Command');
        }
    }]
    } ],{
        // This actually calls the column command with the same name.
        name: "cus@R_673_10608@ommand",text: "Toolbar Command",// The click event never gets fired.
        click: function (E) {
            alert('Toolbar Command');
        }
    },}
});

@H_404_7@demo at jsfiddle

@H_404_7@但我不想在每一行中都有一个额外的按钮,只是为了使工具栏命令工作,所以解决方案是使用自定义事件处理程序的工具栏自定义模板：

@H_404_7@

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    }],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>'
    }],}
});

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