Telerik UI for Windows 8 HTML

This help article will introduce you to RadRadialMenu's menu item objects and their properties. The items are highly customizable in terms of content and styling and allow you to build a menu for a number of different scenarios.

This topic contains the following sections.

To add an item in RadRadialMenu you need to assign the items property an array of menu item objects. This section lists the properties you can set to create a menu item that suits your needs.

Main Settings

Following is a list of the base properties that can be set for a menu item.

  • id: Specifies a string id for the current item. It is advisable to have unique ids for all the items in your radial menu. The menu item object can be easily retrieved by its id through the getItem(id) method.

  • text: Specifies the menu item text that will be shown to the user.

  • icon: Specifies the item's icon. The icon can be any character from the Segoe UI Symbol font or an image.

    If you need an icon specific to the Windows 8 icon set, look at the following address for its Segoe UI Symbol representation: Segoe UI Symbol icon list.

    To display an image, you can assign the icon property an object literal with url (the full path to the image), width (the image width in the menu item) and height (the image height in the menu item) options defined.

  • index: Use this property if you wish to specify the position of the menu item in the circle. The position indexes are from 0 to 7 with the 0 item starting from the specified startAngle of the RadRadialMenu.

  • enabled: Gets or sets a Boolean value indicating whether the item is active and can be tapped by the user. The default property value is true.

  • autoCollapse: A Boolean property indicating whether the menu will automatically collapse when the user taps the current item. Default property value is false.

  • items: An array of child items. Each menu item can have a maximum of 8 child items. The child items are again menu items and can have child items of their own. There is no limit for the menu level depth. You can set the items property of an item when you want to nest commands. For example, you have a menu item Font Style and when expanded, it can list items that allow the user to make their text bold, italic, underlined, etc.

  • tooltip: Use this property to set a custom tooltip to a menu item. By default the tooltip string is identical to the value of the text property.

Selection Settings

The following set of properties controls the selection behavior of menu items:

  • selectable: A boolean property indicating whether the menu item can be selected. Default property value is false.

  • deselectable: A boolean property indicating whether the menu item can be deselected. Default property value is true.

  • group: Specifies the group name this item belongs to. Items that are in the same group are exclusively selectable. This property requires the selectable property value to be true.

  • selected: Gets or sets a boolean value indicating whether item is selected. The default property value is false.

For more information about item selection in RadRadialMenu, see the additional resources linked at the bottom of this help article.

Style Settings

The list below describes all styling settings that you can apply to a menu item and its expand sector.

  • style: This property holds multiple options that can be used to modify each menu item's appearance:

    • background: Use this option to change the menu item's background color.

    • border: Use this option to change the menu item's border color.

    • color: Use this option to change the menu item's text color.

    • disabledColor: The color of the expand sector, the text and the icon when the menu item is disabled.

    • font: Use this option to change the menu item's text font.

    • hoverColor: The color of the hover indicator.

    • iconColor: Use this option to change the menu item's icon color.

    • iconFont: Use this option to change the menu item's icon font.

    • selectedColor: The color of the selected indicator.

  • expandSectorStyle: This property holds the following options to modify the appearance of the expand sector.

    • arrow: The color of the arrow in the expand sector.

    • background: The background color of the expand sector.

    • border: The border color of the expand sector. This border is only between expand sectors. This property does not change the outer menu border color.

    • hoverArrow: The color of the arrow in the expand sector when the user hovers over it.

    • hoverColor: The background color of the expand sector when the user hovers over it.

Type Settings

To get or set the menu item type, use the type property. The menu item types are contained in the Telerik.UI.RadialMenu namespace. Currently RadRadialMenu supports two types of menu items. Below is a list of the menu item types that you can use with brief descriptions and additional properties.

  • Menu Item: The regular menu item that can have child items. To set a menu item to be of this type you need to set its type property value to Telerik.UI.RadialMenu.MenuItem. This is also the default menu item type, so you do not need to specify it explicitly.

  • ColorPicker Item: A menu item that expands into a RadColorPicker control. To set a menu item to be of this type you need to set its type property value to Telerik.UI.RadialMenu.ColorPickerItem. This menu item cannot have child items, cannot be selectable and cannot be in a group.

    The menu items of this type have an additional property colorPicker for configuring the RadColorPicker control. It accepts a color picker options object identical to the one you would use in a color picker control in popup mode. You can find detailed instructions and explanations in this article: RadColorPicker in Popup Mode.

Example

In Code Listing 2 below you can see a RadRadialMenu definition that uses many of the options listed above. The first four items define icon and text while the next four are used for color picking, so they only display a color. The Bold and Italic items are selectable and deselectable, meaning that you can apply a bold style, italic style, bold and italic style or no style. The color items are put in a group and are not deselectable, meaning that you can apply only one color at a time and a color must always be selected.The Cyan item is by default selected.

Code Listing 2: RadRadialMenu Items Settings Copy imageCopy
<textarea id="target4"></textarea>
<div data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
        target: '#target4',
        width: 275,
        offsetLeft: 300,
        startAngle: 0,
        items: [
            {
                id: 'Increase',
                text: 'Increase',
                icon: '\uE1C7'
            },
             {
                id: 'Decrease',
                text: 'Decrease',
                icon: '\uE1C6'
            },
             {
                id: 'Bold',
                text: 'Bold',
                icon: '\uE19B',
                selectable: true
            },
             {
                id: 'Italic',
                text: 'Italic',
                icon: '\uE199',
                selectable: true
            }, {
                id: 'ColorPicker',
                type: Telerik.UI.RadialMenu.ColorPickerItem,
                text: 'Color',
                colorPicker: {
                    mode: 'palette',
                    width: 275
                }
            }
        ]
    }">
</div>

The following image shows the menu defined in Code Listing 2.

Figure 2: RadRadialMenu Items
radialmenu-menu-item-colorpicker

See Also