ejRadialMenu

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>