How do I create a toolbar with custom template that uses the declarative syntax?

4 posts, 1 answers
  1. Bill
    Bill avatar
    5 posts
    Member since:
    Jan 2013

    Posted 22 Jan 2013 Link to this post

    I am trying to replicate the demo here, but using MVVM:

    I configured the grid using data-attributes and the grid works.  The problem that I am encountering is the toolbar.

    I modified the toolbar template to use the data attribute to create a kendo drop-down list:
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" data-role="dropdownlist" data-source="source"></input>
    In the grid declaration I added the data-toolbar attribute referencing the template:
    data-toolbar='[ { template: kendo.template($("#template").html()) } ]'
    However, the data attributes in the template are not being processed by Kendo UI and is rendered as-is on the page.  This resulted in a textbox rather than the drop-down list that I am expecting.

    Is there a way to get this working?
  2. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 24 Jan 2013 Link to this post

    Hi Bill,

    By default the Grid's toolbar will not be bound to the View-Model, respectively all the widgets that it contains will not be initialized. As a workaround I suggest to bind the toolbar manually after the grid is initialized (e.g. after initial kendo.bind).
    kendo.bind($(document.body), viewModel);
    kendo.bind($("#grid").find(".k-grid-toolbar"), viewModel);

    For your convenience I prepared an example:
    I hope this will help.

    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. Peter
    Peter avatar
    43 posts
    Member since:
    Jan 2014

    Posted 07 Jun in reply to Alexander Valchev Link to this post

    This solution does not work if you add binding variables inside the template eg #= someVariable #
    eg change the label to include it: <label data-id="#=someField#"
    This can't work, I think, because Kendo must resolve binding variables and can't postpone it.
  4. Petyo
    Petyo avatar
    2436 posts

    Posted 10 Jun Link to this post


    You are correct - the template evaluation will happen immediately, and won't be re-done with the workaround suggested. However, you may substitute the #= # syntax with the respective MVVM attr/text bindings. 

    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top