Telerik UI for Windows 8 HTML

This article describes the events of RadRadialMenu and its most notable event arguments.

Events

Event Name

Description

Arguments

action

Fires when a menu item is tapped.

e.actionTarget - The target element of the current RadRadialMenu.

e.item - The tapped menu item instance.

e.menu - The RadRadialMenu control instance.

collapse

Fires when RadRadialMenu is collapsed.

e.actionTarget - The target element of the current RadRadialMenu.

e.menu - The RadRadialMenu control instance.

deselect

Fires when a menu item is deselected.

e.actionTarget - The target element of the current RadRadialMenu.

e.item - The deselected menu item instance.

e.menu - The RadRadialMenu control instance.

expand

Fires when RadRadialMenu is expanded.

e.actionTarget - The target element of the current RadRadialMenu.

e.menu - The RadRadialMenu control instance.

hide

Fires when RadRadialMenu is hidden.

e.actionTarget - The target element of the current RadRadialMenu.

e.menu - The RadRadialMenu control instance.

navigate

Fires when the user navigates to another menu view.

e.actionTarget - The target element of the current RadRadialMenu.

e.item - The instance of the menu item that was tapped to trigger navigation.

e.menu - The RadRadialMenu control instance.

select

Fires when a menu item is selected.

e.actionTarget - The target element of the current RadRadialMenu.

e.item - The selected menu item instance.

e.menu - The RadRadialMenu control instance.

show

Fires when RadRadialMenu is shown.

e.actionTarget - The target element of the current RadRadialMenu.

e.menu - The RadRadialMenu control instance.

Example

The following example shows how to handle the action and expand events of RadRadialMenu to apply text style to an editable div element. Code Listing1 defines a RadRadialMenu with three items - Bold, Italic, and Underline. It is attached to a div element with contenteditable attribute set to "true".

Code Listing 1: Define Menu and Editable Area Copy imageCopy
<div id="target1" contenteditable="true" style="color: black; width: 500px; height: 200px; border: 2px solid black">
    Radial menus are an innovative and space-saving toolbars providing the end-user with variety of options to choose 
from. Radial menus are especially useful on touch devices as they enable the developer to place many commands and options in a flexible and dynamic UI 
container.
</div>
<div id="radialMenu1" data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
            target: '#target1',
            visible: false,
            items: [
                 {
                    id: 'Bold',
                    text: 'Bold',
                    icon: '\uE19B',
                    selectable: true
                },
                 {
                    id: 'Italic',
                    text: 'Italic',
                    icon: '\uE199',
                    selectable: true
                },
                 {
                    id: 'Underline',
                    text: 'Underline',
                    icon: '\uE19A'
                }
            ],
            onaction: Events.action,
            onexpand: Events.expand
        }">
</div>

Code Listing 2 handles the two events inside a namespace definition. The expand event handler takes care of displaying the correct selected state of the items, based on the currently selected text formatting. The action event handler applies the text style corresponding to the tapped menu item.

Code Listing 2: Define Menu and Editable Area Copy imageCopy
WinJS.Namespace.define("Events", {
    action: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var action = e.item.id;
        switch (action) {
            case "Bold":
                document.execCommand("bold", false);
                break;
            case "Italic":
                document.execCommand("italic", false);
                break;
            case "Underline":
                document.execCommand("underline", false);
                break;
        }
    }),
    expand: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var menu = e.menu;
        menu.getItem("Bold").selected = document.queryCommandState("bold");
        menu.getItem("Italic").selected = document.queryCommandState("italic");
        menu.getItem("Underline").selected = document.queryCommandState("underline");
    })
});

In Figure 1 below you can see the result of the above definition. The figure shows an editable text area where upon selecting text and expanding the menu, the user can apply a style to the selected piece of the text.

Figure 1: Text Editing Using RadRadialMenu
radialmenu-events

To learn more about the used attributes and APIs, check the See Also section at the bottom.

See Also