Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shivam Katyan
15
select is not working in igx grid header
posted

Hi,

The select tag is not functional in the current version  of igniteui-angular . i am using the select in header to select option, ther is no response from select on clicking it as if it was readonly or disabled.

below is sample code for igx-column fro the header part

<igx-column headerClasses="myClass" width="100px" field="Id" [filterable]="false">
<ng-template igxHeader let-column>
<select #gridHeadSelect id="gridHeaderOptions">
<option>1
</option>
<option>2
</option>
</select>
</ng-template>
<ng-template igxCell let-cell="cell">
<div class="cell__inner">
<div>{{ cell.value }}</div>
<ng-container *ngIf="isTop3(cell)">
<span class="cup" *ngIf="cell.value === 1">
<img src="">www.infragistics.com/.../trophy_gold.svg" alt="golf-trophy" />
</span>
<span class="cup" *ngIf="cell.value === 2">
<img src="">www.infragistics.com/.../trophy_silver.svg" alt="silve-trophy" />
</span>
<span class="cup" *ngIf="cell.value === 3">
<img src="">www.infragistics.com/.../trophy_bronze.svg" alt="bronze-trophy" />
</span>
</ng-container>
</div>
</ng-template>
</igx-column>
Parents
No Data
Reply
  • 21795
    Verified Answer
    Offline posted

    Hello Shivam,

    igxColumnHeader handles mousedown event and prevent its propagation by design. Therefore, what you see is expected behavior. Your select receives mousedown, but never reaches to mouseup neither to mouseclick. In order to make your select to open you should handle mousedown in the select and stop the event propagation. This way event will not reach the column header and all subsequent events will fire.

    Please check this StackBlitz where I have implemented that for you and let me know if this solves your issue, or if you have any additional questions on this matter.

Children