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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add pictures and footer

Thread ID:

Created:

Updated:

Platform:

Replies:

131403 Jul 7,2017 01:30 PM UTC Jul 12,2017 01:01 PM UTC Angular 4
loading
Tags: ejMenu
Agne
Asked On July 7, 2017 01:30 PM UTC

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 [Syncfusion]
Replied On July 10, 2017 01:01 PM UTC

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 
 
 
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
Replied On July 11, 2017 09:16 AM UTC

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
Replied On July 11, 2017 02:21 PM UTC

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 [Syncfusion]
Replied On July 12, 2017 01:01 PM UTC

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 
 
 
 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon 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.Close Icon

;