Telerik UI for Windows 8 HTML

Each menu item in RadRadialMenu can have child items. This feature makes it easier for the end-user to navigate through multiple related options in a small area. This article explains how to define hierarchical menu items, what is their behavior and how to customize them.

Adding Child Menu Items

To add child items to a RadRadialMenu item, set its items property to an array of item definitions. Code Listing 1 below shows a RadRadialMenu with an item that has three child items. The last child item defines its own children.

Code Listing 1: Defining Nested Items Copy imageCopy
<div data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
            target: '#target1',
            items: [
                {
                    text: 'Font Color',
                    icon: '\uE186',
                    index: 4,
                    items: [
                        {
                            id: 'Red',
                            style: {
                                background: 'red'
                            },
                            group: 'colors',
                            selectable: true,
                            deselectable: false,
                            selected: true,
                            index: 3
                        },
                        {
                            id: 'Green',
                            style: {
                                background: 'green'
                            },
                            group: 'colors',
                            selectable: true,
                            deselectable: false,
                            index: 4
                        },
                        {
                            id: 'Blue',
                            style: {
                                background: 'blue'
                            },
                            group: 'colors',
                            selectable: true,
                            deselectable: false,
                            index: 5,
                            items: [
                                {
                                    id: '1',
                                    style: {
                                        background: '#edf7ff'
                                    },
                                    group: 'colors',
                                    selectable: true,
                                    deselectable: false,
                                    index: 3
                                },
                                {
                                    id: '2',
                                    style: {
                                        background: '#d9fbfc'
                                    },
                                    group: 'colors',
                                    selectable: true,
                                    deselectable: false,
                                    index: 4
                                },
                                {
                                    id: '3',
                                    style: {
                                        background: '#52d1f7'
                                    },
                                    group: 'colors',
                                    selectable: true,
                                    deselectable: false,
                                    index: 5
                                },
                                {
                                    id: '4',
                                    style: {
                                        background: '#0000ff'
                                    },
                                    group: 'colors',
                                    selectable: true,
                                    deselectable: false,
                                    index: 6
                                },
                                {
                                    id: '5',
                                    style: {
                                        background: '#091e95'
                                    },
                                    group: 'colors',
                                    selectable: true,
                                    deselectable: false,
                                    index: 7
                                }
                            ]
                        }
                    ]
                }
            ]
        }">
</div>

As a result of the above definition, the item that has children defined will display an arrow in its sector of the outer ring.

When the arrow is tapped, the menu will navigate to the inner view containing the child items of the current item. Now you can either make a selection again or tap the center item which is now a back button. The third child items has child items of its own and the navigation procedure is the same.

Figure 1: Navigating Through RadRadialMenu
radialmenu-nesting-items

See Also