Unable to set Icon/image in Dropdown Tree

[Ravindra]

Hi Team,

I am trying to add icon in Dropdown Tree component but its not working, Kindly see below example

https://stackblitz.com/edit/angular-ap8g8k?file=app.component.ts

I want to add an icon before All Categories and once you open inside with each category as highlighted above.

Regards,

Ravindra

[Sowmiya Padmanaban]

Hi Ravindra,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with DropDownTree component. If you want to add icons in DropDownTree, we have provided a iconCss and imageUrl property in fields settings. Using this property, you can able to add the icons in DropDownTree component. 

 

Refer the below code snippet. 

 

  public field:Object ={ dataSource: this.hierarchicalData, value: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' }; 

   public hierarchicalData: Object[] = [ 

        { 

            nodeId: '01', nodeText: 'Music', icon: 'folder', 

            nodeChild: [ 

                { nodeId: '01-01', nodeText: 'Gouttes.mp3', icon: 'audio' } 

            ] 

        }, 

        { 

            nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true, 

            nodeChild: [ 

                { 

                    nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true, 

                    nodeChild: [ 

                        { nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'https://ej2.syncfusion.com/demos/src/images/employees/9.png' }, 

                        { nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'https://ej2.syncfusion.com/demos/src/images/employees/3.png' }, 

                    ] 

                }, 

            ] 

        }, 

    ]; 

 

App.component.css 

.dropdowntree-icons .e-treeview .e-list-icon.audio { 

    background-position: -10px -244px 

} 

 

Refer the sample link below. 

 

https://stackblitz.com/edit/angular-gg3o1e-xorctd?file=package.json 

 

Refer the below links to know more about the DropDownTree component. 

 

UG documentation- https://ej2.syncfusion.com/angular/documentation/drop-down-tree/getting-started/  

 

Demo link- https://ej2.syncfusion.com/angular/demos/#/material/drop-down-tree/default 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Ravindra]

Hi Team,

Thank you, the reason it wasn't working because i wasn't setting ViewEncapsulation.None.

Could you please advise how to add an icon at the start of dropdown tree as highlighted yellow in below screenshot and also is it possible to check somewhere all the available icons.

Regards,

Ravindra

[Sowmiya Padmanaban]

Hi Ravindra,  

 

We have checked your requirement with DropdownTree component. Currently, we have not provided support for this. We suspect that your requirement is to achieve any of the following cases  

 

Case1 : Add icon in initial loading of DropdownTree 

 

If you want to add icon in initial loading of Dropdowntree, you can add the icon in input element using created event of DropdownTree component. Refer the below code snippet. 

 

 created() { 

     var element = document.getElementsByClassName("e-input-group")[0]; 

     var icon_element = document.createElement("div"); 

     icon_element.setAttribute("class", "e-icon_element e-icons e-plus"); 

     element.insertBefore(icon_element, element.children[0]); 

    } 

<style> 

   .e-plus:before{ 

        content: '\e7f9'; 

        padding-right:10px; 

    } 

</style> 

 

 

 

Refer the sample link below. 

 

https://stackblitz.com/edit/angular-gg3o1e-4c8jqr?file=app.component.html 

 

Case 2: Change the icon based on selection. 

 

In DropdownTree component, select event is triggered for node selection. Using that event, you can add the icon in input element. Refer the below code snippet. 

  select(args) {   

      var icon = args.item.querySelector(".e-list-icon").classList; 

      var element = document.getElementsByClassName("e-input-group")[0]; 

      if(element.children[0].classList.contains("e-icon_element")) 

      { 

        element.removeChild(element.children[0]) 

      } 

      var icon_element = document.createElement("div"); 

      icon_element.setAttribute("class", "e-icons e-icon_element " + "e-" +icon[1]); 

      element.insertBefore(icon_element, element.children[0]); 

    } 

<style> 

    .e-folder:before { 

      content:'\e60b'; 

    } 

    .e-docx:before { 

      content:'\e7b0'; 

    } 

</style> 

 

 

Refer the sample link below. 

 

https://stackblitz.com/edit/angular-gg3o1e-wqgkao?file=app.component.html 

 

If you want to know the icons available in the EJ2 library. Refer the below link. 

 

https://ej2.syncfusion.com/angular/documentation/appearance/icons/ 

 

Please let us know, if you need any further assistance. 

 

  

Regards, 

Sowmiya.P