Add custom button to toolbar

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    1 posts
    Member since:
    May 2018

    Posted 09 May 2018 Link to this post

    How do I add a button to the toolbar of a grid? There isn't much documentation other than using the default commands, which aren't helpful. Ideally, I should be  able to say, 


    toolbar: [{
    name: 'new',
    id: 'createNew',
    text: "Create New ",
    click: function(e) {
    // do stuff
    }
    }]

    I've seen other solutions where I define a template, but I think that is a poor solution, especially if your app is highly modularized. How do you add a button via config options?
  2. Georgi
    Admin
    Georgi avatar
    686 posts

    Posted 11 May 2018 Link to this post

    Hello Jeff,

    The full list of configuration settings of the toolbar can be found in the documentation:


    Have in mind that a click handler property is not available. However, the grid adds a custom class that contains the name of the command. Therefore the click handler can be attached as shown below:

    $(".k-grid-new").click(function(e){ // note that the class is k-grid-new since the name of the command is new
      alert(1)
      // handler body
    });

    For your convenience below you will find a sample which demonstrates the above approach:


     
    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top