i have a few items in Kendo Grid Toolbar.

Everything works fine excepts last item called "test".

Click event not firing defined action.

Question is: How to solve that to fire another AngularJS function in the same Controller?

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

Thanks for any help and advice.

i have a few items in Kendo Grid Toolbar.

Everything works fine excepts last item called "test".

Click event not firing defined action.

Question is: How to solve that to fire another AngularJS function in the same Controller?

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

Thanks for any help and advice.

• javascript
• angularjs
• kendo-ui
• kendo-grid

Share Improve this question Follow asked Jul 1, 2014 at 11:14 redromredrom 11.6k3434 gold badges166166 silver badges269269 bronze badges 1

• are you using angular-kendo and if so which version? – Lars Höppner Commented Jul 1, 2014 at 15:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This is because Kendo UI does not understand the click property on a toolbar item. It is not supported [reference]. Instead, you should define a template for the toolbar item, and in that template you can bind your click function.

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

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