Menu JSP Tag Overview

The Menu JSP tag is a server-side wrapper for the Kendo UI Menu widget.

Telerik UI for JSP DevCraft image

The Menu is part of Telerik UI for JSP, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI AutoComplete for binding to data, passed as a model attribute in Spring MVC.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.

Step 2 Create a new action method which renders the view.

    @RequestMapping(value = {"index"}, method = RequestMethod.GET)
    public String index() {

        return "web/menu/index";
    }

Step 3 Add the Kendo UI taglib mapping to the page.

    <%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

Step 4 Add the menu tag.

    <kendo:menu name="menu">
        <kendo:menu-items>
            <kendo:menu-item text="Products">
                <kendo:menu-items>
                    <kendo:menu-item text="Tables & Chairs"></kendo:menu-item>
                    <kendo:menu-item text="Sofas"></kendo:menu-item>
                </kendo:menu-items>
            </kendo:menu-item>
            <kendo:menu-item text="Stores">
                <kendo:menu-items>
                    <kendo:menu-item>
                        <kendo:menu-item-content>
                            <h2>Around the Globe</h2>
                            <button class="k-button">See full list</button>
                        </kendo:menu-item-content>
                    </kendo:menu-item>
                </kendo:menu-items>
            </kendo:menu-item>
            <kendo:menu-item text="Blog"></kendo:menu-item>
            <kendo:menu-item text="News" enabled="false"></kendo:menu-item>
        </kendo:menu-items>
    </kendo:menu>

Event Handling

Specify Function Names

You can subscribe to all events exposed by Kendo UI Menu by the handler name.

    <kendo:menu name="menu" open="menu_open" close="menu_close">
        <kendo:menu-items>
            <kendo:menu-item text="Blog"></kendo:menu-item>
            <kendo:menu-item text="News" enabled="false"></kendo:menu-item>
        </kendo:menu-items>
    </kendo:menu>

    <script>
        function menu_open() {
            //Handle the open event
        }
          function menu_close() {
            //Handle the close event
        }
    </script>

Attach to select Events of Single Menu Items

The following example demonstrates how to subscribe to the select event of a single Menu item.

    <kendo:menu name="menu">
        <kendo:menu-items>
            <kendo:menu-item text="item 1" select="alert('select');">
            </kendo:menu-item>
        </kendo:menu-items>
    </kendo:menu>

Reference

Existing Instances

You are able to reference an existing Menu instance via the jQuery.data(). Once a reference is established, you are able to use the Menu API to control its behavior.

    //Put this after your Kendo Menu tag declaration
    <script>
    $(function() {
        // Notice that the Name() of the menu is used to get its client-side instance
        var menu = $("#menu").data("kendoMenu");
    });
    </script>

See Also

In this article