We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need to create sub menu items dynamically.

Thread ID:

Created:

Updated:

Platform:

Replies:

121033 Nov 4,2015 10:56 AM UTC Nov 9,2015 11:29 AM UTC ASP.NET MVC 3
loading
Tags: RadialMenu
Manish
Asked On November 4, 2015 10:56 AM UTC

Hi,

I am trying to create radial menu. I am able to create main menu, But I want to add sub menus dynamically.


1. _Layout.cshtml ==> creation of radial menu (total 4 menus)
2. Upon click of a menu it redirect to different action ( location.rel='nofollow' href = '@Url.Action("CustomerMaster", "Customer")';)
3. This opens new view, Now here I want to add some submenus in the existing radial menu.

Is this possible?


Dhinesh Ravi [Syncfusion]
Replied On November 5, 2015 11:42 AM UTC

Hi Manish,

 

Thank you for contacting Syncfusion Support.

 

We can render the child items for the Radial Menu after the new page is navigated. Refer to the below steps to achieve the scenario.

 

Step 1: In the Layout.cshtml page, render the Radial Menu without child items.  Refer to the below code example.

 

[cshtml]

@Html.EJMobile().RadialMenu("radial").Position(RadialMenuPosition.LeftCenter).Items(item =>

{

    item.Add().ImagePath(Url.Content("~/themes/sample/radialmenu")).ImageName("social.png").Windows(win => win.Text("social")).Flat(flat => flat.Text("social"));

            item.Add().ImagePath(Url.Content("~/themes/sample/radialmenu")).ImageName("music.png").Windows(win => win.Text("music")).Flat(flat => flat.Text("music"));

            item.Add().ImagePath(Url.Content("~/themes/sample/radialmenu")).ImageName("direction.png").Windows(win => win.Text("direction")).Flat(flat => flat.Text("direction"));

            item.Add().ImagePath(Url.Content("~/themes/sample/radialmenu")).ImageName("message.png").Windows(win => win.Text("message")).Flat(flat => flat.Text("message"));
        }).ClientSideEvents(evt => evt.Touch("click"))


 

This should be defined after the @Renderbody section in the Layout Page. Click event has to be bound to the RadialMenu. Hence the page will be navigated on clicking on the RadialMenu.

 

Step 2: In the Index.cshtml page, we need to write page navigation script on clicking on the Radial Menu icon. Refer to the below code example.

 

[cshtml]

   <script>

    function click(args) {

        location.rel='nofollow' href = "@Url.Action("page2")"

    }
    </script>


 

On clicking on RadialMenu icon "page2.cshtml" will be transferred.

 

Note: Ensure that Layout section is defined in the page2.cshtml page. Refer to the below code example

 

[cshtml]

   @{

    Layout = "~/Views/Shared/_Layout.cshtml";
    }



Step 3: Once the page2 is navigated, we need to update the child items for the RadialMenu in the document ready function. Refer to the below code example

 

[cshtml]

<script>

    $(function () {

        $("#radial").ejmRadialMenu({

            items: [

           

                {

                    //adding sub items for item1

                    items: [

                        { imageName: "/music.png", imagePath: "/themes/sample/radialmenu/" },

                        { imagePath: "/themes/sample/radialmenu/", imageName: "/direction.png" }

                    ]

                },

            

                {

                    //adding sub items for item2

                    items: [

                       { imageName: "/social.png", imagePath: "/themes/sample/radialmenu/" },

                       { imagePath: "/themes/sample/radialmenu/", imageName: "/direction.png" }

                    ]

                },

                {

                    //adding sub items for item3

                    items: [

                       { imageName: "/message.png", imagePath: "/themes/sample/radialmenu/" },

                       { imagePath: "/themes/sample/radialmenu/", imageName: "/social.png" }

                    ]

                },

                {

                    //adding sub items for item4

                    items: [

                           { imageName: "/direction.png", imagePath: "/themes/sample/radialmenu/" },

                           { imagePath: "/themes/sample/radialmenu/", imageName: "/music.png" }

                    ]

                }

            ]

        })

    })
</script>




Items API which is a predefined array, used to update the items in the RadialMenu. Items array can contains series of objects which renders the items in the RadialMenu.

 

 Items used within the item array will render the child elements for the particular parent item alone. We need to specify the imagePath and imageName of the child items to render in the RadialMenu

 

We have created the simple sample for the requirement. Refer to the sample in the below attachment.

 

RadialMenu

 


Regards,

Dhinesh R


Manish
Replied On November 9, 2015 05:01 AM UTC

Thanks.
I will try this solution.

Dhinesh Ravi [Syncfusion]
Replied On November 9, 2015 11:29 AM UTC

Hi Manish,
 
Thanks for the update.
 
Please let us know if you need any other assistance.
 
Regards,
Dhinesh R

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;