Telerik UI for Windows 8 HTML

The center item is the small circle at the center of the radial menu. It is visible when the menu is collapsed and serves as a button to expand it. The following help article will introduce you the options you can configure to change the center item's visual appearance and behavior.

Setting the Center Item

By default, the center item has a white background and a sprocket-wheel as an icon. When the user navigates to an inner view of the menu, the center item acts as a back button. To modify its appearance use the following properties:

  • 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 center item) and height (the image height in the center item) options defined.

  • style: This property holds multiple options for modifying the center item's appearance:

    • background: Use this property to change the background color of the item. Accepts any valid CSS color as value.

    • border: Use this property to change the center item's border color. Accepts any valid CSS color as value.

    • iconColor: Get or sets the icon's color. Accepts any valid CSS color as value. This property is applicable when the icon is a symbol.

    • iconFont: Use this property to change the font of the icon. In order to use the Segoe UI Symbol glyphs, you must not change the font type of the icon. However, to modify the icon size, you need to explicitly list both the font size and family. Therefore, you need to set this property in the following form: "XXpt Segoe UI Symbol" or "XXpx Segoe UI Symbol".

    • hoverColor: Changes the center item color to the specified value when the user hovers over the item. Accepts any valid CSS color as value.

In Code Listing 1 below you can see a center item configuration and in Figure 1—the result.

Code Listing 1: Center Item Configuration Example Copy imageCopy
<textarea id="target3"></textarea>
<div data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
        target: '#target3',
        center: {
            icon: '\uE109',
            style: {
                background: '#93ffa9',
                border: '#4e8759',
                iconColor: '#4e8759',
                iconFont: '14pt Segoe UI Symbol',
                hoverColor: '#f3ff89'
Figure 1: Customized Center Item