2

I've got a normal igx-grid where the rows are all editable. However, the first row should never be editable. How do I handle that? Also, in the code-snippet below, can you tell me what I've done wrong with the last column? I just want a trash can icon to show up there, but the cell is blank.

<igx-grid (dropped)="onDropAllowed($event)" (onRowDragStart)="onDragAllowed($event)"
          [data]="data?.approvers"
          [height]="null" [rowDraggable]="true" igxDrop primaryKey="wwid">
    <igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="name" header="Name">
    </igx-column>
    <igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="email"
                header="Email"></igx-column>
    <igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="wwid" header="WWID">
    </igx-column>
    <igx-column [editable]="true" field="role" header="Role"></igx-column>
    <igx-column>
        <button class="btn btn-danger" igxButton="icon" type="button">
            <igx-icon>delete</igx-icon>
        </button>
    </igx-column>
</igx-grid>
Bozhidara Pachilova
  • 78
  • 4

1 Answers1

3

You can use the IgxGridComponent's rowEditEnter event and cancel it in order to prevent entering edit mode, effectively making it uneditable.

Regarding your question about setting an icon in the column, you should wrap the content in a template like this:

    <igx-column width="100px" [filterable]="false">
       <ng-template igxCell let-cell="cell">
          <button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex)">
              <igx-icon>delete</igx-icon>
          </button>
        </ng-template>
    </igx-column>
Tihomir Tonev
  • 145
  • 7