CODEWITHSUNDEEP
kendo-gridtoolbar
user721126
user721126

Reputation: 143

Adding custom button to KendoGrid Toolbar Issue

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?

Upvotes: 5

Views: 34096

Answers (5)

Manoj Pilania
Manoj Pilania

Reputation: 666

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" },
   ],

Upvotes: 0

Navid
Navid

Reputation: 609

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

Upvotes: 0

David Baxter
David Baxter

Reputation: 235

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.

Upvotes: 3

Isham
Isham

Reputation: 39

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

Upvotes: -1

Amit
Amit

Reputation: 15387

You can Use as below:

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

Upvotes: 4

Related Questions