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?

Urinary

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

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

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

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'); – Urinary

@Urinary 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 – Premillennialism

Answer 1

You can Use as below:

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

Agma

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

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

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.

Pepper

Answer 3

this works for me:

1. you must define your grid in variable
2. initializing grid and add your button in toolbar option toolbar: [{ name: "myButton", text: "this is your button text" }]
3. after initializing write this code to find button and add function:

grid.find(".k-grid-toolbar").on("click", ".k-grid-myButton", function (e) { alert("it's work") ;});

Lewis

Answer 4

There are many ways to use this. Please use below example.

  toolbar: [
       //{ template: kendo.template($("#k-tmpl-toolbar").html()) },
       { name: "Add", template: kendo.template("<button class='k-button k-button-sm k-rounded-md k-button-solid k-button-solid-primary' onclick='AddNewRecord()'>Add New</button>") },
       { name: "search" },
       //{ name: "create", title: "New" },
   ],

Chickenhearted

Answer 5

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

Charpoy