Grid Dropdown with icon

[Sandip Kumar]

Hi there,

I want to add custom ejs-dropdown in grid but not show open close icon in control (ejs-dropdwon) like editType= 'dropdownedit' this.

[Rajapandi Ravi]

Hi Sandip, 

Greetings from syncfusion support 

Query#: I want to add custom ejs-dropdown in grid but not show open close icon in control (ejs-dropdown) 

Based on your query we suspect that you have render the ejs-dropdown component in Grid column template. So we have achieved your requirement by using css property. We suggest you to follow the below way to achieve your requirement.  

Please refer the below code example and sample for more information. 

Screenshot: 

 

App.component.html 

 

<ejs-grid #grid [dataSource]='data'> 

<e-columns> 

.  .  .  .  .  .  . 

<e-column headerText='Order Status' width='200'> 

<ng-template #template let-data> 

<div> 

<ejs-dropdownlist value='Pending' id="{{data.EmployeeID}}" [dataSource]='dropData' [popupHeight]='150' 

[popupWidth]='150'> 

</ejs-dropdownlist> 

</div> 

</ng-template> 

</e-column> 

.  .  .  .  .  .  . 

</e-columns> 

</ejs-grid> 

 

Index.html 

<style> 

    .e-input + .e-input-group-icon, .e-input-group .e-input + .e-input-group-icon, .e-input-group.e-control-wrapper .e-input + .e-input-group-icon { 

      display: none;  //This css properties also helps to hide the dropdown icon if you are using editType as dropdown in a column 

    } 

    </style> 

If you have render the dropdown while editing the record, the above CSS also will work to remove the show open close icon in the dropdown. 

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

Regards, 

Rajapandi R