Need to create sub menu items dynamically.

[Manish]

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]

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]

Thanks.
I will try this solution.

[Dhinesh Ravi]

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