Can we have the menu bar with icons?

[Amarjot]

Hi,

Can we have icons instead of text in the knockout menu sample?

Or the other way, can we have the toolbar with sub menus (again having toolbar look i.e. having icons)

[Amarjot]

Hi, 

Adding to the queries already projected, can you please explain what does the field 'spriteClass' as one the options for the menu do?

Also, how can we attach actions to the menu items? Is it possible to attach the actions to the menu through the names of the methods being provided from the json data. In other words, can the actions be also attached through data-binding?

[Harikrishnan P]

Hi Amarjot,

Query: Can we have icons instead of text in the knockout menu sample?

Yes, we can have icons in menu control when knockout is used, as like adding icons in any other menu control sample.

 

Query: what does the field 'spriteClass' as one the options for the menu do?

“spriteCssClass” is one of the members of “fields” property. Using this property we can add sprite image to all the menu items. Sprite image is a collection of image put into single image. For more details about sprite image please refer this link,

 

http://www.w3schools.com/css/css_image_sprites.asp

 

We can specify a CSS class name as value for this “spriteCssClass “property as shown below,

         

{ id: 11, parentId: 1, text: "Inbox", sprite: "sprite-inbox" },

{ id: 12, parentId: 1, text: "Drafts", sprite: "sprite-drafts" },

{ id: 13, parentId: 1, text: "Sent items", sprite: "sprite-sentitems"}

 

 

Here “sprite-inbox”, “sprite-drafts”,”sprite-sentitems” are classes specified for adding icons/image in “li” items.

 

We can specify sprite image for the specified classes as follows

 

        [class*="sprite-"] //Specifies all classes with the value “sprite-“

        {

            background-image: url("../images/mail/mailicons.png");

            height: 25px;

            left: 2px;

            top: 4px;

            width: 24px;

        }

 

Background position has to be set to specify which part of the "mailicons.png" image has to be displayed in each “li” item. Please refer below section,

 

.sprite-inbox {background-position:48px 478px}

.sprite-drafts {background-position: 50px 407px}

.sprite-sentitems {background-position: 51px 376px}

 

 

The specified part of the image will be displayed in menu items according to the classes specified.

 

Query: can the actions be also attached through data-binding?

Yes, we can attach actions through data-binding. For this, we have a member called “linkAttribute” in the fields property. Please refer below to attach actions using “linkAttribute”.

//Specify the “linkAttribute” in datasource like below,       

 

var data = [

            { id: 1, text: "Group A", parentId: null },

            { id: 11, parentId: 1, text: "Algeria", sprite: "flag-dz", action: "http://www.w3schools.com/" }];

 

 

Now, map the “action” to “linkattribute” while initializing “fields” property.

 

 

            $("#menujson").ejMenu({

                fields: { dataSource: data, id: "id", parentId: "parentId", text: "text", spriteCssClass: "sprite", linkAttribute: "action" }

            });

 

Please let us know if you have further queries.

Regards,

HariKrishnan.

[Amarjot]

Hi Harikrishnan,

Thanks a lot for your response. 

With regard to the first query, 

Query: Can we have icons instead of text in the knockout menu sample?

Yes, we can have icons in menu control when knockout is used, as like adding icons in any other menu control sample.

I have the following questions further -

1. So as explained in the answer to my second query, can the icons be added through the spriteCssClass attribute, are you referring to the same thing or is there any other way to add icons?

2. Is it possible to just have icons and no text as the menu options?

Also, I could not find any documentation for the linkAttribute, is there any place where I can read about it? Is it the field for linking actions for the menu controls or it¨'s something generic to link any attribute?

[Harikrishnan P]

Hi Amarjot,

Thanks for the update.

 

Query: can the icons be added through the spriteCssClass attribute, are you referring to the same thing or is there any other way to add icons?

In addition to “spriteCssClass” attribute, we can add icons through “imageUrl” property also. “imageUrl” is one of the members of “fields” property and it is used to specify the image URL to “img” tag inside menu items. To use “imageUrl” property please refer below,

Specify the image source while initializing the datasource as follows,

 

     

   <script>

 

$(document).ready(function () {

 

//source for the image file is specified in the image attribute.

        var menu=[         

 { id: 1, image: "images/menu/books-bg.png", imageStyle: { "style": "width:30px;height:15px" }, text: "books", parentId: null },

 

            { id: 2, image: "images/menu/digital-bg.png", imageStyle: { "style": "width:30px;height:15px" }, text: "digital", parentId: null },

 

            { id: 3, image: "images/menu/menu-bg.png", imageStyle: { "style": "width:30px;height:15px" }, text: "menu", parentId: null },

 

            { id: 4, image: "images/menu/movies-bg.png", imageStyle: { "style": "width:30px;height:15px" }, text: "movies", parentId: null },

            ];

 

       window.viewModel = {

                dataList: ko.observableArray(menu),              

                                        

       };

       ko.applyBindings(viewModel);

        });

 

    </script>

 

 

During initialization of menu control using knockout binding, “imageUrl” property is specified as follows

 

<ul id="menuko" data-bind="ejMenu:{fields:{dataSource:dataList,id:'id',text:'text',parentId:'parentId',imageUrl:'image',imageAttribute:'imageStyle'}}">

 

</ul>

 

 

If datasource is not used, icons can be added to the “li” items directly through <img> tag as shown below,

 

 

<li id="Products"><a rel='nofollow' href="#"></a><img src="images/menu/books-bg.png" />

 

 

Query: Is it possible to just have icons and no text as the menu options?

Yes, it is possible to have icons only without having text. But while using datasource, we need to specify text. Without any text, icons alone cannot be displayed as menu items. We have confirmed this as a defect and logged an issue report on this. Fix for this issue (unable to use only icons as menu items) will be available in our upcoming service pack release which is expected to be rolled out by this month end. Please be patience until we get back to you.

 

Query: I could not find any documentation for the linkAttribute, is there any place where I can read about it?

Sorry for the inconvenience caused. In the beta release for the documentations, we have included only some of the important properties and some of the properties needs to be updated. Currently we are customizing the documentations for all JS components and the complete documentations for all components will be available on or before our next service pack release which is expected to be rolled out by this month end.

 

Query: Is it the field for linking actions for the menu controls or it¨'s something generic to link any attribute?

Yes, “linkAttribute” field is specific for linking actions to the menu items.

 

Please let us know if you have further queries.

Regards,

HariKrishnan.

[Harikrishnan P]

Hi Amarjot,

We are glad to announce that our ASP.NET MVC service pack 12.1.0.49 is rolled out successfully and is available to download under the following link:

http://www.syncfusion.com/downloads/mvc-service-packs

Also, the reported issue “unable to use only icons as menu items” has been fixed in this service pack release.

We thank you for your support and appreciate your patience in waiting for this service pack release. Please get in touch with us if you would require any further assistance.

Regards,

HariKrishnan.