Responding to menuitem clicks

[Doug Matulis]

Hello,

I am very, very new to Javascript and now a new user to Syncfusion controls.  I have a question regarding responding to menuitem clicks from the menu control in my ASP.NET MVC 4 application.  Assuming handling these events is best done from Javascript, how do you navigate to another page in your site from Javascript code using the Syncfusion menu control?  Is there a sample that shows how to setup and what the call is in Javascript to so this?

Thanks,

Doug

[Meena]

Hi Doug,

 

Thanks for contacting Syncfusion forums.

 

Your requirement of navigating to a page on menu item click can be achieved in two ways.

 

Way 1: We have given an in-built support for menu item page navigation. This can be achieved using “UrlMapper” property of the Menu Item.

 

Please refer the below code snippet,

 

<code>

 

[View]

 

@Html.Syncfusion().Menu("MyMenu").Mode(MenuModel.ModeType.NormalMenu).Width(300).ClientSideOnClick("ClientSideOnClick").DataSource((System.Collections.IEnumerable)ViewData["MenuData"]).BindTo(fields => fields.Id("ID").ParentId("ParentID").Text("MenuText").UrlMapper("LinkAttributes"))

 

[Models]

        public object LinkAttributes

        {

            get

            {

                return new { rel='nofollow' href = "http://www.google.com" };

            }

        }

</code>

 

In the above code, we have bind the menu items using generic list binding.

 

Way 2: As per your requirement, we can also achieve the page navigation in javascript using “ClientSideOnClick” event. Please refer the below code snippet.

 

<code>

 

[View]

@Html.Syncfusion().Menu("MyMenu").Mode(MenuModel.ModeType.NormalMenu).Width(300).ClientSideOnClick("ClientSideOnClick")

 

[Script]

 

// This event will be triggered on menu item click.

 

function ClientSideOnClick(sender, args) {      

        window.location.replace("http://www.google.com");

    }

 

</code>

 

We have also prepared a simple sample with the above requirement and it can be downloaded from the below link.

 

Note : In the attached sample, we have achieved the requirement in javascript.

 

Kindly have a look at the sample and let us know if it helps.

 

Sorry for the delayed response.

 

Regards,

Meena

F107973_MenuSample_bf642850.zip