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

Binding ejMenu datasource in Angular2

Thread ID:

Created:

Updated:

Platform:

Replies:

124291 May 30,2016 11:44 AM UTC Jun 10,2016 07:35 AM UTC JavaScript 7
loading
Tags: ejMenu
Denis
Asked On May 30, 2016 11:44 AM UTC

Hello. I'm trying to bind datasource to ejMenu dynamically in Angular2. Here is my code:

let paramComponent = {
dataSource: this._data, id: "HID", child: "childs",
parentId: "ParentHID", text: "Name", spriteCssClass: "sprite" 
};
            this.dxComponent.setModel(paramComponent);

As I se in Chrome debugger, datasource binded correctly. But nothing happens and only label "Menu" displays at the place of ejMenu on site. What's wrong? Do the menu needs to be refreshed programmatically?



Kasithangam C [Syncfusion]
Replied On May 31, 2016 12:04 PM UTC

Hi Denis, 
Thanks for using Syncfusion Products. 
We have analyzed your query with the provided code. The issue”Menu control doesn’t render properly” occurs due to passing the child fields as a string type in paramComponent variable instead of object type.Also,you can directly assign the object(paramComponent) to a fields property (this.dxComponent) instead of using setModel as shown below code: 
<code> 
let paramComponent = { 
       dataSource: this.data, id: "Mid", 
       text: "name" 
       child: { dataSource: this.data, id: "id", parentId: "parentId",text: "text" } 
}; 
 this.dxComponent = paramComponent; 
</code> 
We have prepared the sample based on your requirement and it available under the following location, 
  
Sample Location: Sample 
  
If you still face the problem, please revert by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you. 
Please let us know if you have further query. 
Regards, 
Kasithangam 


Denis
Replied On June 2, 2016 11:57 AM UTC

Thank you for reply. I've looked example and solved my question. Can you tell me how to handle click event and get arguments from it?

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On June 3, 2016 11:02 AM UTC

Hi Denis, 
 
Thanks for the update. 
 
To handle the click event in menu control, please use the following code. 

 
<ej-menu id="menu" width="500px" height="30px" [dataSource]="data" [fields]="dxComponent"(click)="onItemClick($event)"
</ej-menu> 
 
And add the below code in .ts file. 

  onItemClick(event) { 
        console.log(event.text + " " + "is clicked"); 
    } 
 
We have prepared a sample for your requirement. Refer the sample in the following link. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Dhivyalakshmi. 
 


Denis
Replied On June 7, 2016 11:37 AM UTC

Hello. Everything is Ok, I made it. Now I have next question. How to show menu item's icons? Like this?



Keerthana Rajendran [Syncfusion]
Replied On June 8, 2016 01:09 PM UTC

Hi Denis, 

Sorry, the image you have updated is not uploaded correctly. So can you please update us with proper image once again, so that we could proceed further. 

Regards, 
Keerthana. 


Denis
Replied On June 8, 2016 01:44 PM UTC

Yeah, sure, here it is.
Menu

Keerthana Rajendran [Syncfusion]
Replied On June 10, 2016 07:35 AM UTC

Hi Denis,   
   
We have prepared a sample to add icons to menu items. Please refer the below given link   
   
  
1)Add Sprite class for all menu items in “this.data” of typescript file   
   
<code>   
this.data=[{ id: 25, parentId: 4, text: "Others", sprite: "mailicon sprite-contacts" } ];   
                             let paramComponent = {   
                                                          dataSource: this.data, id: "Mid",   
                                                          text: "name"   
                                                          child: { dataSource: this.data, id: "id", parentId: "parentId",text: "text" spriteCssClass:"sprite"}   
                                           };   
</code>   
  
   
2)Define style in separate css file and define background position for all sprite classes   
   
<code>   
[class^="sprite-"],   
        [class*="sprite-"] {   
            background-image: url("app/components/menu/content/images/menu/mailicons.png");   
            height: 25px;   
            left: 2px;   
            top: 4px;   
            width: 24px;   
        }   
   
        .sprite-calendar {   
            background-position: -25px -255px;   
        }   
</code>   
  
   
3)Add “styleUrls” with location of css file and encapsulation to typescript file:   
   
<code>   
import {ViewEncapsulation } from 'angular2/core';   
import {encapsulation } from 'angular2/core';    
@Component({   
  selector: 'sd-home',   
  templateUrl: 'app/components/menu/default.component.html',   
  styleUrls: ['app/components/menu/default.component.css'], encapsulation: ViewEncapsulation.None,   
  directives: [EJ_MENU_COMPONENTS, CORE_DIRECTIVES]   
})   
</code>   
  
   
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

;