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.

Binding ejMenu datasource in Angular2

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 08:04 AM

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 07:57 AM

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 07:02 AM

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 07:37 AM

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 09:09 AM

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 09:44 AM

Yeah, sure, here it is.
Menu

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

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.

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.

;