Menu

Description

The Menu widget displays a hierarchical menu that allows navigation and selection.

Official Kendo UI Menu documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates initializing a Menu widget with no additional options specified.

<ul data-bind="kendoMenu: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>Test 1A</li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li>
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>
var ViewModel = function() {};

                            ko.applyBindings(new ViewModel());
  • Test 1
    • Test 1A
    • Test 1B
  • Test2
    • Test 2A
    • Test 2B

This example demonstrates passing additional options in the data-bind attribute. The kendoMenuItem binding can be applied to child elements to control the behavior of individual menu items.

<input type="checkbox" data-bind="checked: twoIsOpen" /> Open 2<br/>
<input type="checkbox" data-bind="checked: twoEnabled" /> Enable 2
<hr/>
<ul data-bind="kendoMenu: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>
                <span>Test 1A</span>
                <ul>
                    <li>Test 1Aa</li>
                    <li>Test 1Ab</li>
                </ul>
            </li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li data-bind="kendoMenuItem: { isOpen: twoIsOpen, enabled: twoEnabled }">
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>
var ViewModel = function() {
    this.twoEnabled = ko.observable(true);
    this.twoIsOpen = ko.observable(false);
};

                            ko.applyBindings(new ViewModel());
Open 2
Enable 2
  • Test 1
    • Test 1A
      • Test 1Aa
      • Test 1Ab
    • Test 1B
  • Test2
    • Test 2A
    • Test 2B

This example demonstrates setting global options in ko.bindingHandlers.kendoMenu.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<input type="checkbox" data-bind="checked: isOpen" /> Open 2<br/>
<input type="checkbox" data-bind="checked: enabled" /> Enable 2
<hr/>
<ul data-bind="kendoMenu: {}">
    <li>
        <span>Test 1</span>
        <ul>
            <li>
                <span>Test 1A</span>
                <ul>
                    <li>Test 1Aa</li>
                    <li>Test 1Ab</li>
                </ul>
            </li>
            <li>Test 1B</li>
        </ul>
    </li>
    <li data-bind="kendoMenuItem: { isOpen: twoIsOpen, twoEnabled: enabled }">
        <span>Test2</span>
        <ul>
            <li>Test 2A</li>
            <li>Test 2B</li>
        </ul>
    </li>
</ul>
var ViewModel = function() {
    this.twoEnabled = ko.observable(true);
    this.twoIsOpen = ko.observable(false);
};

ko.bindingHandlers.kendoMenu.options.orientation = "vertical";

                            ko.applyBindings(new ViewModel());
Open 2
Enable 2
  • Test 1
    • Test 1A
      • Test 1Aa
      • Test 1Ab
    • Test 1B
  • Test2
    • Test 2A
    • Test 2B

Live Options

The kendoMenu.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
enabled

Determines if users can interact with the menu item

isOpen

Indicates whether the menu item is expanded or closed

widget

If specified, will populate an observable with a reference to the actual widget

Future Plans

Better integration with data sources.