Adding image beside list items in Listbox

[sneha]

Hello Team,

I need to add image beside all List items in list box  like below. How can i include it?

Thanks,

Sneha

[Saranya Dhayalan]

Hi Sneha, 

 

Thank you for contacting Syncfusion support 

 

We have checked your report query, you can achieve this by using the iconCss property. To place the icon on a list box, set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the list. In the following sample, icon classes are mapped with iconCss field. 

 

public data: { [key: string]: Object }[] = [ 

    { text: 'Settings', iconCss: 'e-list-icons e-list-user-settings' }, 

    { text: 'Address Book', iconCss: 'e-list-icons e-list-address-book' }, 

    { text: 'Delete', iconCss: 'e-list-icons e-list-delete' }, 

    { text: 'Forward', iconCss: 'e-list-icons e-list-forward' }, 

    { text: 'Reply', iconCss: 'e-list-icons e-list-reply' }, 

    { text: 'Reply All', iconCss: 'e-list-icons e-list-reply-all' }, 

    { text: 'Save All Attachments', iconCss: 'e-list-icons e-list-save-all-attachments' }, 

    { text: 'Save As', iconCss: 'e-list-icons e-list-icon-save-as' }, 

    { text: 'Touch/Mouse Mode', iconCss: 'e-list-icons e-list-touch' }, 

    { text: 'Undo', iconCss: ' e-list-icons e-list-undo' } 

]; 

 

public setfield = { 

  iconCss: "iconCss" 

} 

 

For your convenience we have prepared a sample. Please find the below sample link 

 

Sample link: https://stackblitz.com/edit/angular-cke7d4?file=app.component.ts 

 

Documentation link: https://ej2.syncfusion.com/angular/documentation/list-box/icons-and-templates/ 

 

Please check the above sample and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D 

[sneha]

Hi Saranya ,

Than you for the solution. it is working great. how can i include search filter in listBox?

[Saranya Dhayalan]

Hi Sneha,  

  

Most welcome 

 

Query: how can i include search filter in listBox? 

 

We have checked your reported query, you can achieve this by enable the allowFiltering property. Please find the below code snippet: 

 

<div id="listbox-selection"> 

    <h4>Select your favorite car:</h4> 

    <ejs-listbox [dataSource]="data" [allowFiltering]="true" [fields]="setfield"></ejs-listbox> 

</div> 

 

For your convenience we have modified a sample. Please find the below sample link 

 

Sample link: https://stackblitz.com/edit/angular-cke7d4?file=app.component.html 

 

Please check and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D 

[sneha]

Hi Saranya,

Thank you so much for your support. how can i hover tooltip for listbox items?

[Saranya Dhayalan]

Hi Sneha, 

 

Query: how can i hover tooltip for listbox items? 

 

We have checked your reported query, you can achieve this in the created event. In this event you can add the custom class. Please find the below code snippet: 

 

App.component.html 

<div class="col-lg-12 control-section"> 

        <div id="listbox-control"> 

            <h4>Select your favorite car:</h4> 

            <ejs-listbox id='listbox' #listbox [dataSource]='data' height='330px' [sortOrder]='Ascending' (created)='created ($event)'></ejs-listbox> 

        </div> 

    </div> 

    <div id="hide"> 

        <span id="mySpan"></span> 

    </div> 

 

 

App.component.ts 

   export class AppComponent implements OnInit { 

 

    @ViewChild('listbox') public listObj: ListBoxComponent; 

    ngOnInit() { 

 

      } 

     ngAfterViewInit(){ 

      //Initialize Tooltip component 

      this.tooltip = new Tooltip({ 

          // default content of tooltip 

          content: 'Loading...', 

          // set target element to tooltip 

          target: '.e-custom-tooltip', 

          // bind beforeItemRender event 

          beforeRender: this.onBeforeRender 

      }); 

      this.tooltip.appendTo('body'); 

       

    }  

 

    created(): void { 

      this.addCustomClass(); 

    } 

    addCustomClass():void{ 

      debugger 

      let listLi = document.querySelectorAll(".e-list-item") 

        let i: number; 

        for ( i = 0; i < listLi.length; i++) { 

           

        var mySpan = document.getElementById("mySpan"); 

         mySpan.innerText = listLi[i].innerText;  

        listLi[i].classList.add("e-custom-tooltip") 

        } 

    } 

} 

 

 

For your convenience we have prepared a sample. Please find the below sample link: 

 

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

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D