add event listener for kendo grid command button

Question

I am working on ASP.NET MVC4 application.In which i am using Kendo UI controls.

I am using Kendo Grid.And i want to add event listener on Kendo Grid Toolbar's "add new item" button.

Below is the piece of the code of Grid command button:

 .ToolBar(commands =>
               {
                   commands.Create();
                   commands.Save();
           })

And i want to overrides its click event.Actually i want to check some condition on its click event.And if condition returns true then i want this button should enable otherwise it should be disable.

I have tried to overrides it by some of the below codes but its not worked.

Example:

1)  '$(".k-button.k-button-icontext.k-grid-add").bind("click", function () {   
     alert('add link event');
 });

2)   $(".k-grid-Add").on('click',function () {    
     alert("Hello");
});

 3)   $(".k-button.k-button-icontext.k-grid-add").on("click", function () {   
     alert('add link event');
 }); '

But none of above are working.

Can anyone suggest me the way for this?

Thanks

score 2 · Accepted Answer · answered Jul 31 '13 at 13:34

Use a toolbar template to create your commands. This allows you to specify a onClick event.

.ToolBar(commands => 
 commands.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Create</a>"))

Then you can do your checking in the js function customCommand().

More info on toolbar templates: http://docs.kendoui.com/api/web/grid#configuration-toolbar.template

add event listener for kendo grid command button

1 Answers1