Image Customization

You can customize the Radial Menu’s center and back images by using the image-class and back-image-class properties. Every menu item can be added with image using image-url property. By using this image-class attribute, you can customize the Radial Menu center image.

Sub-Items are also supported in the Radial Menu. To navigate Sub-Items, click the arrows in the outer ring and it displays the corresponding sub-items group. Clicking the center button when a sub-items group is shown, displays the items on the previous level. Nested Radial Menu has the second level back button. In this case, you can use the back-image-class attribute to change your second level back button. back-image-class is used to customize the nestedRadialMenu back image. Refer to the following code example.

You can add the page content with text-area by referring to this section.

  • cshtml
  • @{
        Syncfusion.JavaScript.Models.RadialBadge val = new RadialBadge();
        val.Enabled = true;
        val.Value = 2;
        Syncfusion.JavaScript.Models.RadialMenuSlider stroke = new RadialMenuSlider();
        stroke.StrokeWidth = 1;
        stroke.Ticks=new List<double> { 0, 2, 4, 6, 8, 10, 12, 14 };
        }
         <ej-radial-menu id="nestedRadialMenu" image-class="imageClass" auto-open="false">
                <e-radial-menu-items>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/copy.png" text="Copy" click="copy" enabled="true">
                    </e-radial-menu-item>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/fontsize.png" text="Font" click="font" badge="@val" enabled="true" type="Slider" slider-settings="@stroke" >
                    </e-radial-menu-item>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/font.png" text="Bold" click="bold">
                        <e-radial-menu-child-items>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/f1.png" text="Italic" click="italic"></e-radial-menu-child-item>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/font.png" text="Bold" click="bold"></e-radial-menu-child-item>
                        </e-radial-menu-child-items>
                    </e-radial-menu-item>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/list.png" text="List" click="unorderedList">
                        <e-radial-menu-child-items>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/list.png" text="Bullets" click="unorderedList"></e-radial-menu-child-item>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/l5.png" text="Numbering" click="orderedList"></e-radial-menu-child-item>
                        </e-radial-menu-child-items>
                    </e-radial-menu-item>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/paste.png" text="Paste" click="paste">
                    </e-radial-menu-item>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/undo.png" text="Undo" click="undo">
                        <e-radial-menu-child-items>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/undo.png" text="Undo" click="undo"></e-radial-menu-child-item>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/redo.png" text="Redo" click="redo" enabled="false"></e-radial-menu-child-item>
                        </e-radial-menu-child-items>
                    </e-radial-menu-item>
                    <e-radial-menu-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/align.png" text="Alignment" click="center">
                        <e-radial-menu-child-items>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/a1.png" text="Left" click="left"></e-radial-menu-child-item>
                            <e-radial-menu-child-item image-url="http://mvc.syncfusion.com/demos/web/Images/RadialMenu/a2.png" text="Right" click="right" enabled="false"></e-radial-menu-child-item>
                        </e-radial-menu-child-items>
                    </e-radial-menu-item>
                </e-radial-menu-items>
            </ej-radial-menu>

    Add the following code in your script section,

  • javascript
  • <script type="text/javascript">
            var rteObj, rteElement = $("#rteSample2"), radialElement = $('#nestedRadialMenu');
            $(function () {
                if (!(ej.browserInfo().name == "msie" && ej.browserInfo().version < 9)) {
                    $("#radialtarget2").parent().css("position", "relative");
                }
                else {
                    $("#contentDiv").html("Radial Menu is only supported from Internet Explorer Versioned 9 and above.").css({ "font-size": "20px", "color": "red" });
                }
                $(window).resize(function(){
                    if(ej.isMobile() && ej.isPortrait())
                        $('#nestedRadialMenu').css({ "left": 25 })
                });
            });
            function rteCreate(e) {
                rteObj = this;
            }
            function radialShow(e) {
                var target = $("#radialtarget2"), radialRadius = 150, radialDiameter = 2 * radialRadius,
                // To get Iframe positions
                    iframeY = e.event.clientY, iframeX = e.event.clientX,
                // To set Radial Menu position within target
                    x = iframeX > target.width() - radialRadius ? target.width() - radialDiameter : (iframeX > radialRadius ? iframeX - radialRadius : 0),
                    y = iframeY > target.height() - radialRadius ? target.height() - radialDiameter : (iframeY > radialRadius ? iframeY - radialRadius : 0);
                radialElement.ejRadialMenu("setPosition", x, y);
                $('iframe').contents().find('body').blur();
            }
            function rteChange(e) {
                radialElement.ejRadialMenu("enableItem", "Undo");
            }

    Add this into style section,

  • css
  • <style type="text/css" class="cssStyles">
            .e-radialmenu .imageClass
            {
                background-image: url("mvc.syncfusion.com/demos/web/Images/RadialMenu/main.png");
            }
            
            .e-radialmenu .backImageClass
            {
                background-image: url("mvc.syncfusion.com/demos/web/Images/RadialMenu/Back_button.png");
            }
        </style>

    The following screenshot illustrates the output.

    Image Customization

    Radial Menu - Image Customization – Main menu

    When you click the arrow, it navigates to the child item as illustrated in the following screenshot.

    Image Customization

    Radial Menu- Image Customization – Child menu