We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Adding igRadialMenu to an HTML Page

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igRadialMenu™ control to an HTML page.

Required background

The following topics are prerequisites to understanding this topic:

igRadialMenu Features: This topic explains the features supported by the control from developer perspective.
igRadialMenu Visual Elements: This topic provides an overview of the visual elements of the control.

In this topic

This topic contains the following sections:

Adding igRadialMenu to an HTML Page – Conceptual Overview

Adding igRadialMenu summary

To add igRadialMenu control to a web page requires an HTML element, a <div> to serve as the base for the instantiation. The basic configuration of the igRadialMenu requires providing its dimensions and also defining some menu items.

Requirements

The following table summarizes the requirements for using the igRadialMenu control.

Required Resources Description What you need to do…

jQuery and jQuery UI JavaScript resources

Ignite UI for jQuery™ is built on top of the following frameworks:

Add script references to both libraries in the section of your page.

General igRadialMenu JavaScript Resources

The igRadialMenu control depends on functionality distributed across several files in the Ignite UI for jQuery Library. You can load the required resources in one of the following ways:

Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page.
Load the required resources manually. You need to use the dependencies listed in the table below.

The following table lists the Ignite UI for jQuery library dependences related to the igRadialMenu control. These resources need to be referred to explicitly if you chose not to use igLoader or the combined files.

JS Resources	Description
`infragistics.util.js` `infragistics.util.jquery.js`	Ignite UI for jQuery utilities
`infragistics.ext_core.js` `infragistics.ext_collections.js` `infragistics.ext_collectionsextended.js` `infragistics.ext_ui.js` `infragistics.dv_core.js` `infragistics.dv_interactivity.js` `infragistics.dv_jquerydom.js`	Data visualization core functionality
`infragistics.ui.widget.js`	A common widget functionality
`infragistics.radialmenu.js`	The `igRadialMenu` control
`infragistics.ui.radialmenu.js`	The `igRadialMenu` widget

Add one of the following:

A reference to igLoader
A reference to all the required JavaScript files (listed in the table on the left).
A reference to the combined files and optionally to the file containing the encodings.

Steps

Following are the general conceptual steps for adding igRadialMenu to an HTML page.

Create a target element for storing the igRadialMenu control.
Instantiate the igRadialMenu control.
Configure the basic rendering options.
Add a button item (optional)
Add a color item (optional)
Add a numeric gauge item (optional)

Adding igRadialMenu to an HTML Page – Procedure

Introduction

This procedure adds an instance of the igRadialMenu to an HTML page, configure its dimensions and add some menu items.

Preview

The following screenshot is a preview of the result with all optional steps completed.

Prerequisites

To complete the procedure, you need the required JavaScript and CSS files referenced on the HTML page.

Following is the full code for this procedure.

In HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/modules/infragistics.ui.radialmenu.css" rel="stylesheet"/>

    <!-- jQuery Files -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>

    <!-- Infragistics Shared JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_interactivity.js"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>

    <!-- Radial Menu Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.radialmenu.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.radialmenu.js"></script>
</head>
<body>
</body>
</html>

Steps

The following steps demonstrate how to add igRadialMenu to an HTML page.

Create a target element for storing the igRadialMenu control

Create a <div> element within the HTML body on which to instantiate the igRadialMenu control.

In HTML:
```
 <body>
     
     <div id="radialMenu"></div>
 </body>
```

Instantiate the igRadialMenu control

Use the target element defined in step 1 to select and instantiate the igRadialMenu control.

In HTML:

 <script type="text/jscript">
 $(function () {                        
     $("#radialMenu").igRadialMenu({
     });
 });
 </script>

Configure basic rendering options

Configure the width and height options when instantiating the igRadialMenu.

In JavaScript:
```
 $("#radialMenu").igRadialMenu({
     width: "300px",
     height: "300px"
 });
```

Add a button item (optional)

Define a button item in the igRadialMenu.

In JavaScript:

 $("#radialMenu").igRadialMenu({
     items:
         [
             {
                 name: "button1",
                 header: "Bold",
                 click: function () {
                     // add code for handling the click event
                 }
             }
         ]                       
 });

Add a color item (optional)

Define a color item with color well Sub-Items in the igRadialMenu.

In JavaScript:

 $("#radialMenu").igRadialMenu({
     items:
         [
             {
                 type: "coloritem",
                 header: "Color",
                 items:
                     [
                         {
                             type: "colorWell",
                             color: "#FFFF00"
                         },
                         {
                             type: "colorWell",
                             color: "#C00000"
                         },
                         {
                             type: "colorWell",
                             color: "#008000"
                         },
                         {
                             type: "colorWell",
                             color: "#002060"
                         },
                         {
                             type: "colorWell",
                             color: "#000000"
                         }
                     ]
             }
         ]                       
 });

Add a numeric gauge item (optional)

Define a numeric gauge item in the igRadialMenu.

In JavaScript:

 $("#radialMenu").igRadialMenu({
     items:
         [
             {
                 type: "numericgauge",
                 wedgeSpan: "5",
                 ticks: "8,9,10,11,12,13,14,16,18,20,22,24,26,28,36,48",
                 value: "16"
             }
         ]                       
 });

Full code

Following is the full code for this procedure.

In HTML:

<!DOCTYPE html>
<html>
<head>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/modules/infragistics.ui.radialmenu.css" rel="stylesheet"/>

    <!-- jQuery Files -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>

    <!-- Infragistics Shared JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_interactivity.js"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>

    <!-- Radial Menu Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.radialmenu.js"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.radialmenu.js"></script>

<script type="text/jscript">
$(function () {                        
    $("#radialMenu").igRadialMenu({
        width: "300px",
        height: "300px",
        items:
        [
            {
                name: "button1",
                header: "Bold",
                click: function () {
                    // add code for handling the click event
                }
            },
            {
                type: "coloritem",
                header: "Color",
                items:
                [
                    {
                        type: "colorwell",
                        color: "#FFFF00"
                    },
                    {
                        type: "colorwell",
                        color: "#C00000"
                    },
                    {
                        type: "colorwell",
                        color: "#008000"
                    },
                    {
                        type: "colorwell",
                        color: "#002060"
                    },
                    {
                        type: "colorwell",
                        color: "#000000"
                    }
                ]
            },
            {
                type: "numericgauge",
                wedgeSpan: "5",
                ticks: "8,9,10,11,12,13,14,16,18,20,22,24,26,28,36,48",
                value: "16"
            }
        ]
    });
});
</script>
</head>
<body>
    <!-- Target element for the igRadialMenu -->
    <div id="radialMenu"></div>
</body>
</html>

Ignite UI | Help Topics

Adding igRadialMenu to an HTML Page

Topic Overview

Purpose

Required background

In this topic

Adding igRadialMenu to an HTML Page – Conceptual Overview

Adding igRadialMenu summary

Requirements

Steps

Adding igRadialMenu to an HTML Page – Procedure

Introduction

Preview

Prerequisites

Steps

Full code

Related Content

Topics