Adding new row to igx grid using igx-action-strip

632 Views Asked by At

I am trying to create a igx grid table with an edit-button, similar to this example provided by Infragistics Angular Grid Row Adding Example

<igx-action-strip #actionstrip>
    <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
</igx-action-strip>

I added IgxActionStripModule to the app.modules.ts and addRow is not found. Should I add some other modules or why this simple example does not work? I did not find no tutorials or explanations about it. I have Angular version 12 and Visual Studio 2019.

1

There are 1 best solutions below

2
On BEST ANSWER

Ensure the following:

  • the other two dependency modules are present as well. You should see IgxActionStripModule, IgxInputGroupModule and IgxFocusModule.

  • check that the modules persist in the @NgModule imports as well.

  • Set rowEditable grid input to true, and add action strip as content projection in the grid:

    <igx-action-strip #actionstrip> <igx-grid-editing-actions [addRow]="true">

  • Setting primary key is mandatory for row adding operations.

Now upon row hover you should see the row action icons for row adding, editing and delete