Using input controls in column header with Ignite Grid

Question

Using Ignite UI for Angular Data Grid and I want to make an editor for the name of a column. However, the grid control seems to disable any input controls I put into the header template.

How can I enable input controls in the header template for my grid?

The code below creates a grid with an input control in the header. The input control cannot be clicked or the value edited.

<ng-template igx-header #editColumnMapping let-column>
  <input type="text" name="textInput" [value]="column.header" />
</ng-template>

<igx-grid #grid2 [data]="[[1], [2], [3], [4]]">
  <igx-column header="Values" [headerTemplate]="editColumnMapping" field="0"></igx-column>
</igx-grid>

score 2 · Accepted Answer · answered Dec 27 '19 at 12:35

Your code looks correct. I have created a sample for you in StackBlitz

<igx-grid #grid1 [data]="data">
    <igx-column header="Rank"    field="Id"    [headerTemplate]="hTemplate"></igx-column>
    <igx-column header="Athlete" field="Name"  [headerTemplate]="hTemplate"></igx-column>

...

<ng-template #hTemplate let-column>
    <div (click)="fieldInput.focus()">
      <span >{{column.header}}</span>
      <br />
      <input #fieldInput [(ngModel)]="column.header" style="width: 100%">
    </div>
</ng-template>

The sample is working with both the latest 9.0.0-beta.6 and 8.2.13

Using input controls in column header with Ignite Grid

1 Answers1