The RadialMenu control is a context that represents the menu items are arranged in a circular order with a centric button element in it. By default, only the center button is visible. The Radial Menu displays the root level menu item with rotational animation effects on clicking the center menu button.

Example {:.example}

Requires {:.require}

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.data

• module:ej.touch

• module:ej.radialmenu

{:#members:autoopen}

To show the Radial in initial render.

Default Value: {:.param}

• false

Example {:.example}

{:#members:backimageclass}

Renders the back button Image for Radial using class.

Default Value: {:.param}

• e-backimage

Example {:.example}

{:#members:cssclass}

Sets the root class for RadialMenu theme. This cssClass API helps to use custom skinning option for RadialMenu control. By defining the root class using this API, we need to include this root class in CSS.

Default Value: {:.param}

• ""

Example {:.example}

{:#members:enableanimation}

To enable Animation for Radial Menu.

Default Value: {:.param}

• true

Example {:.example}

{:#members:imageclass}

Renders the Image for Radial using Class.

Default Value: {:.param}

• e-radialimage

Example {:.example}

{:#members:items}

Specify the items of radial menu

Example {:.example}

{:#members:items-imageUrl}

Specify the URL of the frame background image for radial menu item.

Example {:.example}

{:#members:items-prependTo}

Specifies the template property of RadialMenu for SVG icon.

Example {:.example}

{:#members:items-text}

Specifies the text of RadialMenu item.

{% highlight html %}

    <ej-radialmenu id="defaultradialmenu"  [items]= "items">

{% endhighlight %}

{% highlight ts %}

  items: Array<any>;
  constructor() {
  this.items=[{text:"Text Fieeld"}];

}

{% endhighlight %}

{:#members:items-enabled}

Specifies the enable state of RadialMenu item.

Example {:.example}

{:#members:items-click}

specify the click event to corresponding image/text for performing some specific action.

Example {:.example}

{:#members:items-badge}

Specifies radialmenu item badges.

Example {:.example}

{:#members:items-badge-enabled}

Specifies whether to enable radialmenu item badge or not.

Example {:.example}

{:#members:items-badge-value}

Specifies the value of radial menu item badge.

Example {:.example}

{:#members:items-type}

Specifies the type of nested radial menu item.

Example {:.example}

{:#members:items-sliderSettings}

Specifies the sliderSettings ticks for nested radial menu items.

Example {:.example}

{:#members:items-sliderSettings-ticks}

Specifies the sliderSettings ticks values of nested radial menu items.

Example {:.example}

{:#members:items-sliderSettings-strokeWidth}

Specifies the sliderSettings stroke Width value.

Example {:.example}

{:#members:items-sliderSettings-labelSpace}

Specifies the value of sliderSettings labelSpace .

Example {:.example}

{:#members:items-items}

Specifies to add sub level items .

{:#members:radius}

Specifies the radius of radial menu

Default Value: {:.param}

• 150

Example {:.example}

{:#members:targetelementid}

To show the Radial while clicking given target element.

Default Value: {:.param}

• null

Example {:.example}

{:#members:position}

To set radial render position.

Default Value: {:.param}

• null

Example {:.example}

{:#methods:hide}

To hide the radialmenu

Example {:.example}

{:#methods:menuhidedeprecated}

To hide the radialmenu items

N>Since it is deprecated use the method “hideMenu”

Example {:.example}

{:#methods:hidemenu}

To hide the radialmenu items

Example {:.example}

{:#methods:show}

To Show the radial menu

Example {:.example}

{:#methods:showmenu}

To show menu items

Example {:.example}

{:#methods:enableitembyindex}

To enable menu item using index

Example {:.example}

{:#methods:enableItemsByIndices}

To enable menu items using indices

Example {:.example}

{:#methods:disableitembyindex}

To disable menu item using index

Example {:.example}

{:#methods:disableitemsbyindices}

To disable menu items using indices

Example {:.example}

{:#methods:enableitem}

To enable menu item using item text

Example {:.example}

{:#methods:disableitem}

To disable menu item using item text

Example {:.example}

{:#methods:enableitems}

To enable menu items using item texts

Example {:.example}

{:#methods:disableitems}

To disable menu items using item texts

Example {:.example}

{:#methods:updatebadgevalue}

To update menu item badge value

Example {:.example}

{:#methods:showbadge}

To show menu item badge

Example {:.example}

{:#methods:hidebadge}

To hide menu item badge

Example {:.example}

{:#events:selectdeprecated}

Event triggers when we select an item.

N>Since it is deprecated use the method “click”

Example {:.example}

{:#events:click}

Event triggers when we click an item.

Example {:.example}

{:#events:open}

Event triggers when the menu is opened.

Example {:.example}

{:#events:close}

Event triggers when the menu is closed.

Example {:.example}