Adding custom button to KendoGrid Toolbar Issue

Question

Hi I've added a button to the toolbar of my KendoUI Grid, but I have a couple of issues, I'm hoping someone can assist with.

1. I've tried to add one of the kendo web icons next to the button but it doesn't render.
2. When I click the button in the toolbar I see the following error in the console:

Uncaught ReferenceError: sendEmail is not defined.

I don't understand why it isn't seeing my function. Just for testing purposes I'm displaying an alert until it sees it.

toolbar: [
            { name: "create", text: "Add" },
            { template: "<input type='button' class='k-button' value='Email Users' onclick='sendEmail()' />",
              imageclass: "k-icon k-i-pencil" }
        ]

function sendEmail() {
   debugger;
   alert('Send Emails');
}

Can someone please help?

Solution 1

You can Use as below:

 toolbar: [
 {
    name: "Add",
    text: "Send Email",
    click: function(e){alert('Send Emails'); return false;}
 }
],

Solution 2

According to the documentation you would need to return the function that you want to occur on click. Like this:

 template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'

The documentation

I hope that helps.

Comments

[CSharper]

My guess would be that function sendEmail() is inside the block where you define the Grid. Make sure that function is in it's own code block

[user721126]

I made sure that it was outside of where the grid is defined. I have it at the bottom of my $(document).ready(function () {});

[Jorgelig]

Here is a publication with a similar problem: stackoverflow.com/a/11954911

[user721126]

After a bit of further searching I found a way using the following method to trigger the click event. `{ name: "email", className: "emailUsers", text: "Email Users" } $(.emailUsers).click(function() { alert('Send Emails');

[Igor Mironenko]

@user721126 life saver! Setting the 'className' and binding the event yourself should be an answer! The click binding simply does not work for me, no matter what I try - including the well accepted answer below

[Igor Mironenko]

Amazingly, not even this works for me. The click event doesn't fire

[SKLTFZ]

actually, only kendoTreeList can apply the click, which is exactly the your provided solution