Kendo data-binding messes up the menu

1 Answer 22 Views
Menu MVVM
Evgueni
Top achievements
Rank 1
Evgueni asked on 22 Apr 2022, 09:06 PM

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:

enter image description here

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!

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 27 Apr 2022, 04:19 PM

Hello, Evgueni

Source binding is not supported by the Menu. A possible approach would be to bind the widget to an existing Hierarchical DataSource as in this example. The other option is to implement a Custom Binding as shown in this article.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Menu MVVM
Asked by
Evgueni
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or