This is a migrated thread and some comments may be shown as answers.

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

3 Answers 559 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 22 Jan 2013, 07:44 PM
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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 24 Jan 2013, 12:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 08 Jun 2016, 03:38 AM
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.
0
Petyo
Telerik team
answered on 10 Jun 2016, 06:56 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
MVVM
Asked by
Bill
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Peter
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or