Kendo Grid 工具栏项不触发点击功能：答案

【问题标题】：Kendo Grid toolbar item not firing click function:Kendo Grid 工具栏项不触发点击功能：
【发布时间】：2014-07-01 11:14:03
【问题描述】：

我在剑道网格工具栏中有一些项目。

一切正常除了最后一项称为“测试”。

点击事件未触发定义的操作。

问题是：如何解决这个问题以在同一个控制器中触发另一个 AngularJS 函数？

 toolbar: [
                { template: kendo.template($("#preparedViewsToolbar").html()) },
                { name: "create" },
                { name: "save" },
                { name: "cancel" },
                {
                    name: "test",
                    text: "testme",
                    click: function(e){
                        console.log("TEST");
                    }
                }
            ]

感谢您的帮助和建议。

【问题讨论】：

你在使用 angular-kendo，如果是，是哪个版本？

标签： javascript angularjs kendo-ui kendo-grid

【解决方案1】：

这是因为 Kendo UI 不理解工具栏项上的 click 属性。不支持 [reference]。相反，您应该为工具栏项定义一个模板，并在该模板中绑定您的点击功能。

JSBin example

<div id="grid"></div>
  <script id="template" type="text/x-kendo-template">
    <a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
  </script>
  <script>
  function toolbar_click() {
    console.log("Toolbar command is clicked!");
    return false;
  }
  $("#grid").kendoGrid({
    toolbar: [
      { name: 'create' },
      { name: 'save' },
      { name: 'cancel' },
      { template: kendo.template($("#template").html()) }
    ],
    columns: [
      { title: 'Name', field: "name" },
      { title: 'Age', field: "age" }
    ],
    dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
    ]
  });
</script>

【讨论】：

onclick 与 ng-click 不同，onclick 后不能在作用域上调用 angular 方法。
这就是您的其他 SO 问题。您没有提供任何类型的 AngularJS 实现，因此不可能读懂您的想法。我只是回答了如何根据文档将新的工具栏项添加到 Kendo 网格中，如果您花时间阅读它的话。

【解决方案2】：

var tableDIV =  $("<div id='grid'> </div>");
$("body").append(tableDIV); 

//set toolbar options and custom events. 
var toolBar = [
    {
        name: "Add",
        text: "Add new record",
        events:{
            click:function(e){
                alert($(this).text());
            }
        }
    }
];

//initialize grid with toolbar options.
tableDIV = tableDIV.kendoGrid({  
    toolbar: toolBar,  
    columns: [
      { title: 'Name', field: "name" },
      { title: 'Age', field: "age" }
    ],
    dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
}).data("kendoGrid");  

//now bind events here.  
tableDIV.element.find(".k-header.k-grid-toolbar > a").each(function(i){
    console.log(i,toolBar);
    $(this).bind((toolBar[i].events != undefined ? toolBar[i].events : null));
});

【讨论】：