Binding ejMenu datasource in Angular2

[Denis]

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]

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]

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]

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. 

http://www.syncfusion.com/downloads/support/forum/124291/ze/menu_angular-36634053.zip 

 

Please let us know if you need any further assistance. 

 

Regards, 

Dhivyalakshmi. 

 

[Denis]

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

[Keerthana Rajendran]

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]

Yeah, sure, here it is.

[Keerthana Rajendran]

Hi Denis,   

   

We have prepared a sample to add icons to menu items. Please refer the below given link   

   

Sample: http://www.syncfusion.com/downloads/support/forum/124291/ze/Menu_angular-1324251090.zip   

  

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.