ejRadialMenu

11 Jul 201824 minutes to read

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.

Syntax

JS

$(element).ejRadialMenu()

Example

HTML

// Create radialmenu in obtrusive way
<script> 
$(function(){
$("#defaultRadialMenu").ejRadialMenu(); 
});
</script>
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.data

• module:ej.touch

• module:ej.radialmenu

Members

autoOpen boolean

To show the Radial in initial render.

Default Value:

• false

Example

HTML

// Set Radialmenu autoOpen on initialization. 
//To set autoOpen API 
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true });      
});
</script>

HTML

//Get or set the Radialmenu autoOpen, after initialization:
<script>
// Gets the autoOpen API.               
$("#defaultRadialMenu").ejRadialMenu ("option", "autoOpen");                    
// Sets the autoOpen API
$("#defaultRadialMenu").ejRadialMenu ("option", "autoOpen", true);            
</script>

backImageClass string

Renders the back button Image for Radial using class.

Default Value:

• e-backimage

Example

HTML

// Set Radialmenu back button Image on initialization. 
//To set back button image API 
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "backImageClass":"e-backimage" });       
});
</script>

HTML

//Get or set the Radialmenu backImageClass, after initialization:
<script>
// Gets the backImageClass API.         
$("#defaultRadialMenu").ejRadialMenu ("option", "backImageClass");                      
// Sets the backImageClass API
$("#defaultRadialMenu").ejRadialMenu ("option", "backImageClass", "e-backimage");            
</script>

cssClass string

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:

• ””

Example

HTML

// Set Radialmenu cssClass on initialization. 
//To set cssClass API 
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "cssClass":"custom-class" });     
});
</script>

HTML

//Get or set the Radialmenu cssClass, after initialization:
<script>
// Gets the cssClass API.               
$("#defaultRadialMenu").ejRadialMenu ("option", "cssClass");                    
// Sets the cssClass API
$("#defaultRadialMenu").ejRadialMenu ("option", "cssClass", "custom-class");            
</script>

enableAnimation boolean

To enable Animation for Radial Menu.

Default Value:

• true

Example

HTML

// Set Radialmenu enableAnimation on initialization. 
//To set enableAnimation API 
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "enableAnimation":true });       
});
</script>

HTML

//Get or set the Radialmenu enableAnimation, after initialization:
<script>
// Gets the enableAnimation API.                
$("#defaultRadialMenu").ejRadialMenu ("option", "enableAnimation");                     
// Sets the enableAnimation API
$("#defaultRadialMenu").ejRadialMenu ("option", "enableAnimation", true);            
</script>

imageClass string

Renders the Image for Radial using Class.

Default Value:

• e-radialimage

Example

HTML

// Set Radialmenu Image on initialization. 
//To set image API  
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "imageClass":"e-radialimage" }); 
});
</script>

HTML

//Get or set the Radialmenu Image, after initialization:
<script>
// Gets the Image API.          
 $("#radialmenu").ejRadialMenu ("option", "imageClass");                        
// Sets the imageClass API
$("#radialmenu").ejRadialMenu ("option", "imageClass", "e-radialimage");            
</script>

items Array

Specify the items of radial menu

Example

HTML

<div id="defaultRadialMenu">
</div>
 
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ items:[{ text:"textField", imageUrl:"/Bold.jpg"}] }); 
});
</script>

items.imageUrl string

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

Example

HTML

<div id="defaultRadialMenu">
</div>
 
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ items:[{ imageUrl:"/Bold.jpg"}] }); 
});
</script>

items.prependTo string

Specifies the template property of RadialMenu for SVG icon.

Example

HTML

<div id="defaultRadialMenu">
</div>
 
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ items:[{ prependTo:"#template"}] }); 
});
</script>

items.text string

Specifies the text of RadialMenu item.

Example

HTML

<div id="defaultRadialMenu">
</div>
 
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ items:[{ text:"textField" }] }); 
});
</script>

items.enabled boolean

Specifies the enable state of RadialMenu item.

Example

HTML

<div id="defaultRadialMenu">
</div>
 
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ items:[{ enabled:false }] }); 
});
</script>

items.click string

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

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{imageUrl:"themes/sample/tile/font.png", text:"Bold", click:"bold" }]});
function bold(e){
  //do some actions
}
</script>

items.badge Object

Specifies radialmenu item badges.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{text:"Bold", enabled: true, badge.enabled:true }]});

</script>

items.badge.enabled boolean

Specifies whether to enable radialmenu item badge or not.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{text:"Bold", enabled: true, badge.enabled:true }]});

</script>

items.badge.value number

Specifies the value of radial menu item badge.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{ badge.enabled:true, badge.value:3 }]});

</script>

items.type string

Specifies the type of nested radial menu item.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{badge.enabled:true, badge.value:"3", type:"slider" }]});

</script>

items.sliderSettings Object

Specifies the sliderSettings ticks for nested radial menu items.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{ badge.enabled:true, badge.value:3, type:"slider", sliderSettings.ticks:[0,2,4,6,8,10] }]});

</script>

items.sliderSettings.ticks Array

Specifies the sliderSettings ticks values of nested radial menu items.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{ badge.enabled:true, badge.value:3, type:"slider", sliderSettings.ticks:[0,2,4,6,8,10] }]});

</script>

items.sliderSettings.strokeWidth number

Specifies the sliderSettings stroke Width value.

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{badge.value:3, type:"slider", sliderSettings.ticks:[0,2,4,6,8,10], sliderSettings.strokeWidth:3 }]});

</script>

items.sliderSettings.labelSpace number

Specifies the value of sliderSettings labelSpace .

Example

HTML

<div id="radialmenu" ></div>
<script>
$("#radialmenu").ejRadialMenu({ items:[{ type:"slider", sliderSettings.ticks:[0,2,4,6,8,10], sliderSettings.labelSpace:15 }]});

</script>

items.items Array

Specifies to add sub level items .

radius number

Specifies the radius of radial menu

Default Value:

• 150

Example

HTML

// Set Radialmenu radius on initialization. 
//To set radius API  
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "radius":150});  
});
</script>

HTML

//Get or set the Radialmenu radius, after initialization:
<script>
// Gets the radius API.         
 $("#radialmenu").ejRadialMenu ("option", "radius");                    
// Sets the radius API
$("#radialmenu").ejRadialMenu ("option", "radius", 150);            
</script>

targetElementId string

To show the Radial while clicking given target element.

Default Value:

• null

Example

HTML

// Set Radialmenu targetElementId on initialization. 
//To set targetElementId API 
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ "targetElementId":"target" });   
});
</script>

HTML

//Get or set the Radialmenu targetElementId, after initialization:
<script>
// Gets the targetElementId API.                
$("#defaultRadialMenu").ejRadialMenu ("option", "targetElementId");                     
// Sets the targetElementId API
$("#defaultRadialMenu").ejRadialMenu ("option", "targetElementId", "target");            
</script>

position Object

To set radial render position.

Default Value:

• null

Example

HTML

// Set Radialmenu position on initialization. 
//To set position API 
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$(function () {
$("#defaultRadialMenu").ejRadialMenu({ position:{x:10,y:10} });   
});
</script>

HTML

//Get or set the Radialmenu position, after initialization:
<script>
// Gets the position API.                
$("#defaultRadialMenu").ejRadialMenu ("option", "position");                     
// Sets the position API
$("#defaultRadialMenu").ejRadialMenu ("option", "position");            
</script>

Methods

hide()

To hide the radialmenu

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ("hide");
</script>

menuHide()[Deprecated]

To hide the radialmenu items

NOTE

Since it is deprecated use the method “hideMenu”

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ("menuHide");
</script>

hideMenu()

To hide the radialmenu items

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ("hideMenu");
</script>

show()

To Show the radial menu

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ("show");
</script>

showMenu()

To show menu items

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ("showMenu");
</script>

enableItemByIndex(itemIndex)

To enable menu item using index

Parameters	Type	Description
itemIndex	number	Index of the Radialmenu to be enabled.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-enabled="false"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ({ "autoOpen":true});
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.enableItemByIndex(0);
</script>

enableItemsByIndices(itemIndices)

To enable menu items using indices

Parameters	Type	Description
itemIndices	Array	Index of the Radialmenu to be enabled.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-enabled="false"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction" data-ej-enabled="false"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu ({ "autoOpen":true});
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.enableItemsByIndices([0,2]);
</script>

disableItemByIndex(itemIndex)

To disable menu item using index

Parameters	Type	Description
itemIndex	number	Index of the Radialmenu to be disabled.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.disableItemByIndex(0);
</script>

disableItemsByIndices(itemIndices)

To disable menu items using indices

Parameters	Type	Description
itemIndices	Array	items of the Radialmenu to disable.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.disableItemsByIndices([1,3]);
</script>

enableItem(item)

To enable menu item using item text

Parameters	Type	Description
item	String	item of the Radialmenu item to enable.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-enabled="false"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.enableItem("social");
</script>

disableItem(item)

To disable menu item using item text

Parameters	Type	Description
item	String	item of the Radialmenu item to disable.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.disableItem("social");
</script>

enableItems(items)

To enable menu items using item texts

Parameters	Type	Description
items	Array	items of the Radialmenu item to enable.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-enabled="false"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction" data-ej-enabled="false"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.enableItems(["social","direction"]);
</script>

disableItems(items)

To disable menu items using item texts

Parameters	Type	Description
items	Array	items of the Radialmenu item to disable.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.disableItems(["social","direction"]);
</script>

updateBadgeValue(index, value)

To update menu item badge value

Parameters	Type	Description
index	number	The index value to add the given items at the specified index. If index is not specified, the given value will not be updated.
value	number	The Value to be updated in the badge. It will be updated based on the given index

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-badge-enabled="true" data-ej-badge-value="3"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.updateBadgeValue(0,4);
</script>

showBadge(index)

To show menu item badge

Parameters	Type	Description
index	number	Index of the Radialmenu item to be shown badge.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-badge-enabled="true" data-ej-badge-value="3"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.showBadge(0);
</script>

hideBadge(index)

To hide menu item badge

Parameters	Type	Description
index	number	Index of the Radialmenu item to hide the badge.

Example

HTML

<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social" data-ej-badge-enabled="true" data-ej-badge-value="3"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>

HTML

<script>
$("#defaultRadialMenu").ejRadialMenu({ "autoOpen":true});  
var obj=$("#defaultRadialMenu").ejRadialMenu("instance");
obj.hideBadge(0);
</script>

Events

select[Deprecated]

Event triggers when we select an item.

NOTE

Since it is deprecated use the method “click”

Name	Type	Description
HTML argument	Object	Event parameters from Radialmenu Name Type Description HTML cancel boolean if the event should be canceled; otherwise, false. HTML model Object returns the Radialmenu model HTML type string returns the name of the event HTML item Object returns the item of element HTML itemName String returns the name of item

Example

HTML

//select event for Radialmenu
<div >
<br />
<p>
Syncfusion is the enterprise technology partner of choice for Windows development
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$("#defaultRadialMenu").ejRadialMenu({
  select: function (args) { //handle the event
}
});         
</script>

click

Event triggers when we click an item.

Name	Type	Description
HTML argument	Object	Event parameters from Radialmenu Name Type Description HTML cancel boolean if the event should be canceled; otherwise, false. HTML model Object returns the Radialmenu model HTML type string returns the name of the event HTML item Object returns the item of element HTML itemName String returns the name of item

Example

HTML

//click event for Radialmenu
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$("#defaultRadialMenu").ejRadialMenu({
  click: function (args) { //handle the event
}
});         
</script>

open

Event triggers when the menu is opened.

Name	Type	Description
HTML argument	Object	Event parameters from Radialmenu Name Type Description HTML cancel boolean if the event should be canceled; otherwise, false. HTML model Object returns the Radialmenu model HTML type string returns the name of the event

Example

HTML

//open event for Radialmenu
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$("#defaultRadialMenu").ejRadialMenu({
  open: function (args) { //handle the event
}
});         
</script>

close

Event triggers when the menu is closed.

Name	Type	Description
HTML argument	Object	Event parameters from Radialmenu Name Type Description HTML cancel boolean if the event should be canceled; otherwise, false. HTML model Object returns the Radialmenu model HTML type string returns the name of the event

Example

HTML

//close event for Radialmenu
<div >
<br />
<p>
Model-view-controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.
</p>
</div>  
<div id="defaultRadialMenu">
<ul>
<li data-ej-imageurl="../themes/sample/radialmenu/social.png"
data-ej-text="social"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/music.png" 
data-ej-text="music"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/direction.png" 
data-ej-text="direction"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/message.png" 
data-ej-text="message"></li>
<li data-ej-imageurl="../themes/sample/radialmenu/browser.png" 
data-ej-text="browser"></li>
</ul>
</div>
<script>
$("#defaultRadialMenu").ejRadialMenu({
  close: function (args) { //handle the event
}
});         
</script>