Add pictures and footer

[Agne]

Hello,

is there a possibility in ej-menu add something like footer where user can not click with mouse (or nothing happening on click)? And also in that footer between text add some picture?

Also is there a possibility to add picture from WebAPI into menu when picture must be in left side of menu and nodes in right side of menu?

For example:

Menu

-- SubMenu1

-- SubMenu2

---- SubSubMenu1

---- SubSubMenu2

-- SubMenu3

-- Footer (SomeText Picture SomeText)

All in all something like this:

[Keerthana Rajendran]

Hi Agne, 

 

Thank you for contacting Syncfusion support 

 

Query : is there a possibility in ej-menu add something like footer where user cannot click with mouse (or nothing happening on click)? And also in that footer between text add some picture? 

 

Currently we don’t have  footer option in menu. But we can customize its UI in create event of menu by appending the footer as li  to ul of sub menu items 

 

Query: Also is there a possibility to add picture from WebAPI into menu when picture must be in left side of menu and nodes in right side of menu? 

 

To add image for each menu item we have imageUrl property and spriteCssClass property in menu. We can add image to menu as shown in the attached image by using the below code. 

 

OnCreate(event) 

            { 

                        $(".e-menu ul").append("<li class='e-list'><a class='e-menulink'><img src='src/content/images/dark-arrow2.png'>Text</a></li>") 

                        $(".e-menu ul:first").prepend("<div class='e-image'><img src='src/content/images/chart/grain.png'></div>") 

                        $(".e-menu ul:first").addClass("e-first"); 

            } 

<style> 

.e-image 

{ 

    float:left; 

    margin: 10px; 

} 

.e-first 

{ 

  width: 300px; 

} 

</style> 

 

We have attached sample for reference. Please download sample from below link 

 

Sample: Sample-566645357.zip 

 

If we have misunderstood your requirement please get back to us with some additional details on your requirement like video or any online link to showcase the requirement 

 

Regards, 

Keerthana. 

[Agne]

Hello,

thank you, it was very helpful. But I have one more question - is there a possibility to add picture not on top all lines, but have one big picture in left menu side and all nodes in right menu side?

Like this:

BIG PICTURE            | Node1

SAME BIG PIC          | Node2

SAME BIG PIC          | Node3

SomeTextNotPictureAnyMore

Something like this  instead of this  

[Agne]

Hello again,

one more question - how to disable clicking on specific line (added like in example in OnCreate method)? I tried to do it with disableItemByID(itemId) method, but for me it is not working.

[Keerthana Rajendran]

Hi Agne, 

Query : thank you, it was very helpful. But I have one more question - is there a possibility to add picture not on top all lines, but have one big picture in left menu side and all nodes in right menu side? 

Like this: 

BIG PICTURE            | Node1 

SAME BIG PIC          | Node2 

SAME BIG PIC          | Node3 

As we mentioned in our previous update we have added picture in left side and menu item on right side through create event and aligned using css. Please refer the below link for video 

 

Video: http://www.syncfusion.com/downloads/support/forum/131403/ze/Menu1522632929.zip 

 

 

Query: one more question - how to disable clicking on specific line (added like in example in OnCreate method)? I tried to do it with disableItemByID(itemId) method, but for me it is not working 

 

We have added id for li item which is added as footer and disabled the footer by using its id. Please refer the below code 

 

OnCreate(event) 

            { 

                        $(".e-menu ul").append("<li class='e-list e-footer' id='footer'><a class='e-menulink'><img src='src/content/images/dark-                     arrow2.png'>Text</a></li>") 

                        $(".e-menu ul:first").prepend("<div class='e-image'><img src='src/content/images/chart/grain.png'></div>") 

                        $(".e-menu ul:first").addClass("e-first"); 

                         var menuObj = $("#menu").data("ejMenu"); 

                         menuObj.disableItemByID("footer"); 

            } 

 

Regards, 

Keerthana.