Igx grid cell with button inside

Question

I am working on an Angular project with Ignite UI. I have a igx grid and "edit"-buttons in each cell from the igx grid.

When I edit one of these cells and press the Enter key then the changed cell values are shown like this:

And not in italic like this one:

Here is my igx grid.

    <igx-grid igxPreventDocumentScroll
              #grid1
              [batchEditing]="true"
              [data]="posts"
              [primaryKey]="'myId'"
              [rowHeight]="40">
    
      <igx-column field="monat" dataType="string" header="Monat" [editable]="true" [movable]="true">
    
         <ng-template igxCell let-cell="cell">

           <span>{{ cell.value }}</span>

              <button igxButton="icon 
              (click)="editSelectedData(cell.id.rowID,cell.column.field, 
              cell.value)" >
                   <igx-icon>edit</igx-icon>
              </button>

        </ng-template>
      </igx-column>
    </igx-grid>

How can I add a button inside a cell of igx grid, so that the changed data will be marked in italic like in the third screenshot?

I think that the <span>-element is not the right one, if yes, which HTML-element should I use? Thanks.

score 1 · Accepted Answer · answered Nov 14 '21 at 19:26

1

The reason to see different font-style is because of the custom template that you are using. The default styling of edited value (a change that is not yet comitted to the database) is with font-style:italic, which does not apply to custom templates. Batch editing topic and Transaction service topic.

You will have to set a custom style to your template or in that case, span or div element, whatever you decide to choose:

<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
...
  <igx-column field="UnitPrice" header="Unit Price" [dataType]="'string'"></igx-column>
  <igx-column field="UnitsOnOrder" header="Units On Order" dataType="number">
            <ng-template igxCell let-cell="cell">
                <div class="test">{{ cell.value }}</div>
                   <button igxButton="icon">
                        <igx-icon>edit</igx-icon>
                   </button>
             </ng-template>
        </igx-column>

:host ::ng-deep {
    .igx-grid__td--edited > div {
        font-style: italic;
    }
}

Note: If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

answered Nov 14 '21 at 19:26

Zdravko Kolev

1,569
14
20

1

Perfect! Thank you so much! – ivs Nov 15 '21 at 09:14
Is it possible to style the entire row too? When I delete a row, then the cells with the edit-button are not crossed out. – ivs Nov 15 '21 at 13:26
Yes, it is possible, check out this article that explains how to set conditional styleing of rows based on custom rules: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/conditional-cell-styling#grid-conditional-row-styling – Zdravko Kolev Nov 16 '21 at 09:05
I am trying to use the rowClasses and rowStyles from the tutorial since yesterday, but I get the error: "Can't bind to rowClasses since it is not a known property of igx-grid." – ivs Nov 16 '21 at 09:13
1

Please ensure that you are using version => of 12.2.0, as this feature was introduced in 12.2.0: https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md#new-features-2 – Zdravko Kolev Nov 16 '21 at 09:19

Igx grid cell with button inside

1 Answers1