I am using Kendo UI for JQuery and need to create a data-bound Kendo menu. By data bound, I mean that the items need to be data bound to an array property of a Kendo observable. The issue is that it appears that MVVM binding messes up formatting and functionality of the items. Here is my code (based on the example found in Kendo's documentation) :
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Select an item</h4>
<ul data-role="menu"
data-bind="events: { select: onSelect },
visible: isVisible"
style="width: 100%;">
<li>
Products
<ul data-template="menu-item-template" data-bind="source: items">
</ul>
</li>
</ul>
</div>
</div>
<script id="menu-item-template" type="text/x-kendo-template">
<li data-bind="text: text"></li>
</script>
<script>
var viewModel = kendo.observable({
isVisible: true,
items: ["Product1", "Product2", "Product3"],
onSelect: function (e) {
var text = $(e.item).children(".k-link").text();
kendoConsole.log("event :: select(" + text + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.demo-section .box-col li {
margin-bottom: 0;
}
</style>
The result of executing this code looks like this:
Notice how the formatting of the items is messed up (no margins, etc.).
Do you know what's the proper way to combine data binding and Kendo menu?
Thank you!
Personally, I don't care for the MVVM style. It is too much boilerplate in my opinion.
Here is an example of setting up the menu by passing an object representing the various configuration values. Doing it like this, I do not get the same formatting issues that you get: