Question

我在Kendo Grid Toolbar中有一些项目。

一切正常排除最后一项名为＆＃34; test＆＃34;。

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

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

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

感谢您的帮助和建议。

Answer 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>

Answer 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));
});

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

2 个答案: