Two columns in dropdown

[RakhiS]

Hi,

I want to show two columns in dropdown for example 

One column for icon image and one column with its respective description. So is it possible to achieve this ??

[Sevvandhi Nagulan]

Hi RakhiS,   

  

Greetings from Syncfusion support.   

  

We have provided MultiColumn in DropDownList component by using “template” support. In your application set the cssClass (cssClass="e-multi-column") property and if you want to add the border in column, take the multicolumn td element set border. We have prepared sample based on your requirement.   

  

<ejs-dropdownlist id='country' [cssClass]="cssClass" width="350px" #local[dataSource]='countries'   

                 [fields]='localFields' filterType='StartsWith'[placeholder]='localWaterMark'>   

    <ng-template #itemTemplate="" let-data="">   

        <table>   

            <tbody>   

                <tr>   

                    <td class="e-text-center" style="width: 75px;">{{data.EmployeeID}}</td>   

                    <td>{{data.FirstName}}</td>   

                </tr>   

            </tbody>   

        </table>   

    </ng-template>   

    <ng-template #noRecordsTemplate>   

        <span class='norecord'> NO DATA AVAILABLE</span>   

    </ng-template>   

</ejs-dropdownlist>   

  

[Css]   

    .e-multi-column.e-ddl.e-popup.e-popup-open td {   

        border: 1px solid rgba(0, 0, 0, 0.125);   

    }    

  

Please find the sample below,   

  

Sample Link: https://stackblitz.com/edit/angular-qcyda5-kppyzr?file=app.component.html  

  

Regards,   

Sevvandhi N