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

[Bill]

I am trying to replicate the demo here, but using MVVM:
http://demos.kendoui.com/web/grid/toolbar-template.html

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>

    </div>

</script>

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?

[Alexander Valchev]

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: http://jsbin.com/ibuyer/2/edit
I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Peter]

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.

[Petyo]

Hi,

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. 

Regards,
Petyo
Telerik