Adding preset buttons to toolbar template

4 posts, 0 answers
  1. Johan
    Johan avatar
    2 posts
    Member since:
    Oct 2012

    Posted 03 May 2013 Link to this post

    I have the following toolbar template:
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar" style="float: left">  
            <label class="customers-label" for="customers">Filter details by customer:</label>
            <input type="search" id="customers" style="width: 150px"/>
        <div class="toolbar""> 
            <label class="shops-label" for="shops">Filter details by shop:</label>
            <input type="search" id="shops" style="width: 150px"/>
    I include it as follow in my grid:
    rowTemplate: kendo.template($("#rowTemplate").html()),
    But I also want the following buttons to be part of it:
    toolbar: [{ name: "create" },{ name: "save" }, { name: "cancel" }],
    How do I combine the 2, I have tried various ways, but to no avail. I also have a similar situation with the rowtemplate where I want to include the buttons for edit and destroy.

    I have to add that I am pretty new to kendo and I looked at the available documentation but I cannot find an answer. Any help would be appreciated.
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 07 May 2013 Link to this post

    Hi Johan,

    Thank you for contacting us. The template defines whole structure (mark-up) of the toolbar/row.
    This means that if a template is used, the Grid will not render automatically the default command buttons. In order to achieve that, you should include the buttons mark-up inside the toolbar/rowTemplate.

    Please use the developer tools of your browser (Firebug, Chrome Dev Tools) to inspect and copy mark-up of the rendered buttons and add it in the template.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Pete Smith
    Pete Smith avatar
    5 posts
    Member since:
    Mar 2012

    Posted 15 Apr 2016 Link to this post

    I am trying to do the same thing and it works for the most part, but the save changes button is now double posting. Any ideas as to why that would be?
  4. Dimo
    Dimo avatar
    8472 posts

    Posted 20 Apr 2016 Link to this post

    Hello Pete,

    The button's click handler may be atttached two times (depending on the custom code), or the button's markup may be matching the Grid's native Save button's markup, so one click handler is attached by the custom code, and one by the Grid. Please verify and send a runnable example if further assistance is required.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top