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. Image for the cookie policy date
close icon

Responding to menuitem clicks

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

1 Reply

ME Meena Syncfusion Team April 3, 2013 06:47 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon