Telerik UI for Windows 8 HTML

There are multiple ways to interact with RadRadialMenu programmatically. You can get menu items, navigate the control or get the visible radial menu on the page. The following article describes how you can do these things from the code-behind.

This topic contains the following sections.

In Code Listing 1 you can see a simple RadRadialMenu configuration that will be used in the examples below.

Code Listing 1: Mark-up Copy imageCopy
<textarea id="textarea"></textarea>
<div id="menu" data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
        items: [
                id: 'fontSize',
                text: 'Font size',
                icon: '\uE1C8',
                items: [ 
                    { id: 'xxs', text: 'XX-Small' },
                    { id: 'xs', text: 'X-Small' },
                    { id: 's', text: 'Small' },
                    { id: 'm', text: 'Medium' },
                    { id: 'l', text: 'Large' } 
            }, {
                id: 'font',
                text: 'Font',
                icon: '\uE185'

Getting Menu Items

RadRadialMenu exposes three methods that allow you to get the menu items you need. Here is a list of the methods with short descriptions:

  • getAllItems(): This method returns all menu items including all nested items.

  • getCurrentItems(): Use this method to get only the menu items that are visualized at that moment. This method returns a maximum of eight items.

  • getItem(id): This method returns a single menu item by its id. You have to set unique values to every menu item's id property in order for this method to work correctly.

Code Listing 2: Getting Menu Items Copy imageCopy
var menu = Telerik.UI.find.RadialMenu("#menu");

var allItems = menu.getAllItems();              // returns the value of the radial menu 'items' property.
var currentItems = menu.getCurrentItems();      // returns the items with ids 'fontSize' and 'font' if the menu has just been expanded.
var item = menu.getItem("font");                // returns the item with id 'font'.

Navigating the Radial Menu

There are five methods that allow you to control and navigate the radial menu. You can show, hide, expand, collapse, navigate forwards and backwards in RadRadialMenu. Below is a list of the methods with descriptions and examples of their use.

  • show(target, position, offsetLeft, offsetTop): Use this method to show the RadRadialMenu's pop-up button if it is hidden. You can set four optional arguments to specify a target element and a relative position where the pop-up will be visualized. If you do not provide any arguments to the method, then the default settings or the settings set in the constructor will take effect.

  • hide(): This method hides the pop-up button of the radial menu if it is shown. If the menu is expanded, the method collapses it first and then hides the pop-up.

    Code Listing 3: Showing and Hiding the Pop-up Copy imageCopy;                                    // displays the radial menu pop-up button with the 
                                                    // default target and position settings.'#textarea', 'bottom right', 10, 10); // displays the radial menu pop-up to the bottom right of the
                                                    // textarea element with the set offsetLeft and offsetTop settings.
    menu.hide();                                    // hides the menu pop-up button
  • toggle(): You can use this method to toggle between collapsed and expanded state of the radial menu. The pop-up button has to be shown for this method to work.

    Code Listing 4: Expand and Collapse the Radial Menu Copy imageCopy;                                    // displays the menu pop-up button.
    menu.toggle();                                  // toggles between the menu expand and collapse state. In this case it will expand.
    menu.toggle();                                  // calling the method a second time will collapse the menu.
  • navigate(item): Use this method to navigate to the child items of the item passed as an argument.

  • back(): This method navigates the radial menu to the currently shown items' parent item.

    Code Listing 5: Navigate the Radial Menu Copy imageCopy
    var item = menu.getItem('fontSize');            // gets the 'fontSize' menu item
    menu.navigate(item);                            // navigates to the 'fontSize' menu item's child items
    menu.back();                                    // navigates back to the 'font' and 'fontSize' items

Refreshing the Radial Menu

If you add new items to the current menu view and you need to visualize them immediately, use the refresh(immediate) method. The immediate argument is of type boolean and is optional. If set to true, the radial menu view will refresh without animation. By default the refresh() method animates the menu while it is refreshing.

Code Listing 6: Adding an Item and Refreshing the Menu View Copy imageCopy
menu.toggle();                                  // the toggle() method expands the menu to the root view
var item = {                                    // create a new valid menu item
    id: 'fontColor',
    text: 'Font color',
    icon: '\uE186'
menu.items.push(item);                          // adds the menu item to the radial menu 'items' property
menu.refresh(true);                             // refreshes the radial menu without animating it

Getting the Active Menu on The Page

You can have multiple radial menus per page, but only one menu can be active (visible) at a given moment. To get a reference to the currently active RadRadialMenu on the page, use the Telerik.UI.RadRadialMenu.getVisible() static method. It returns a Telerik.UI.RadRadialMenu object or null if there is no active menu on the page.

Code Listing 7: Getting the Visible Menu Copy imageCopy
var activeMenu = Telerik.UI.RadRadialMenu.getVisible(); // returns the active menu control instance