Элемент панели инструментов Kendo Grid не запускает функцию щелчка:

#javascript #angularjs #kendo-ui #kendo-grid

Вопрос:

у меня есть несколько элементов в панели инструментов Kendo Grid.

Все работает нормально, за исключением последнего элемента под названием «тест».

Событие щелчка не запускает определенное действие.

Вопрос в том, как решить это, чтобы запустить другую функцию AngularJS в том же контроллере?

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

Спасибо за любую помощь и совет.

Ответ №1:

Это потому, что Kendo UI не понимает click свойство элемента панели инструментов. Это не поддерживается [ссылка]. Вместо этого вы должны определить шаблон для элемента панели инструментов, и в этом шаблоне вы можете привязать свою функцию щелчка.

Пример JSBin

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

1. onclick не совпадает с ng-click, после onclick вы не можете вызвать метод angular в области видимости.

2. Вот о чем ваш другой вопрос SO. Вы не предоставили какой-либо реализации AngularJS, поэтому невозможно прочитать ваши мысли. Я просто ответил, как вы добавляете новый элемент панели инструментов в Kendo grid, согласно документации, если вы нашли время, чтобы прочитать его.

Ответ №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));
});