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?

Answer 1

You can Use as below:

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

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

Answer 3

Is your function sendEmail() initialized in document.ready or $(()=>{}); if not you will have to initialize it or else you could use this way add a id for the button and write this in your document.ready (remove the onlcick from the button tag). $("#examplebuttonid").click(()=>{ //write your code in here });