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.
Unfortunately, activation email could not send to your email. Please try again.

How to apply url, htmlAttribute,imageUrl ,linkAttribute for Menu Items?

You can customize the Menu items using properties likeurl”, “htmlAttribute”, “imageUrl”, “linkAttribute. These properties are defined inside the field object of the Menu control. To know more about field object and its members, refer the following link: http://help.syncfusion.com/cr/js

The uses of these properties are shown in the following table.

Table 1: Properties

Property

Use

fields.htmlAttribute

Specifies the html attributes to “li” item list.

fields.url

Specifies the url to the anchor tag in menu item list.

fields.linkAttribute

Adds custom attributes to the anchor tag of the menu items.

fields.imageUrl

Specifies the image URL to “img” tag inside item list

You can see the details in setting the above mentioned properties with data source as follows.

Setting htmlAttribute for each Menu item

Using “htmlAttribute” property, you can add HTML attributes, like styles, title to the <li> tag of the corresponding Menu item. To define the “htmlAttribute” in the data source, refer the following code.

C#

In above code, htmlAttribute gets the object of HtmlAttribute, the custom class. Inside “HtmlAttribute class, you can declare any properties like style, title or whatever you used as an attribute in the <li> tag.

Passing URL for Menu and setting attributes for Anchor tag using linkAttribute

The URL property is used to set the URL for the anchor tag, in the <li> tag of Menu item. This URL property can receive any value, in string type and the linkAttribute property is used to set the attributes of anchor tag element. It receives the object of LinkAttribute class, that is, the custom class. Inside “LinkAttribute class you can declare any properties, like target, href, whatever is used as an attribute in the anchor tag.

C#

Setting imageUrl for Menu item

The imageURL property specifies the URL of the image, and the corresponding image is added to the relevant Menu item. Here the imageURL property can receive any value, of string type.

C#

In the “fields” property, you have to map the name of all the attributes that are specified in the data source. For example, the attribute htmlAttribute”, specified in the data source, is mapped like HtmlAttribute("htmlAttribute").

CSHTML

Based on this, a sample was prepared and you can find the sample under the following location.

Sample:

http://www.syncfusion.com/downloads/support/directtrac/132673/MenuSample-985751916.zip

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
3008 12/09/2014 12/09/2014 ASP.NET MVC Menu
Tags:
Did you find this information helpful?
Comments
Wilfredo Gutierrez Apr 03, 2017
http://help.syncfusion.com/cr/js
This page doesn't exist in your website.

Reply
Add Comment
You must log in to leave a comment

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.