Questions on Kendo UI for jQuery Forum

2 questions

1 answer

320 views

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

ActionSheet

Application

AutoComplete

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

66 views

Kendo data-binding messes up the menu

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>