The Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. Add an Action Strip component with editing actions enabled in the grid's template, hover a row and use the provided button or press ALT + + to spawn the row adding UI.
Angular Grid Row Adding ExampleThe following sample demonstrates how to enable native row adding in the Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the Done button, or discarded by using Cancel button.
Row Adding UsageTo get started import the IgxGridModule in the app.module.ts file:
// app.module.ts
...
import { IgxGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxGridModule],
...
})
export class AppModule {}
Then define a Grid with bound data source and rowEditable set to true and an Action Strip component with editing actions enabled. The addRow input controls the visibility of the button that spawns the row adding UI.
<igx-grid [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true">
<igx-column field="ProductID" header="Product ID" dataType="number"></igx-column>
<igx-column field="ReorderLevel" header="ReorderLever" dataType="number"></igx-column>
<igx-column field="ProductName" header="ProductName" dataType="string"></igx-column>
<igx-column field="UnitsInStock" header="UnitsInStock" dataType="number"></igx-column>
<igx-column field="OrderDate" dataType="date"></igx-column>
<igx-column field="Discontinued" header="Discontinued" dataType="boolean"></igx-column>
<igx-action-strip #actionstrip>
<igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
</igx-action-strip>
</igx-grid>
Setting primary key is mandatory for row adding operations.
NoteEvery column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the editable column's input to false.
The IgxGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type RowType) to fine tune which records the button shows for.
The internal IgxBaseTransactionService is automatically provided for Grid. It holds pending cell changes until the row state is submitted or cancelled.
Grid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported.
Using beginAddRowById requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing null for the first parameter.
this.grid.beginAddRowById('ALFKI'); // spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null); // spawns the add row UI as the first record
The beginAddRowByIndex method works similarly but requires you to specify the index at which the UI should spawn. Allowed values range between 0 and the size of the data view - 1.
this.grid.beginAddRowByIndex(10); // spawns the add row UI at index 10
this.grid.beginAddRowByIndex(0); // spawns the add row UI as the first record
The Default position row add UI is below the row that the end user clicked the add row button for.
The Grid scrolls to fully display the add row UI automatically.
The overlay for the add row UI maintains its position during scrolling.
The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the Grid Row Editing topic for more information.
After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the Grid. In a Grid that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the Grid to its position if it is not in view.
Keyboard NavigationALT + + - Enters edit mode for adding a row
ESC exits row adding mode without submitting any changes
TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row.
Any row adding operation will stop if the data view of the Grid gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, etc.
Summaries are updated after the row add operation finishes. The same is valid for the other data view dependant features such as sorting, filtering, etc.
Customizing the text of the row adding overlay is possible using the igxRowAddTextDirective.
<ng-template igxRowAddText>
Adding Row
</ng-template>
Customizing the buttons of the row editing overlay is possible using the igxRowEditActionsDirective. If you want the buttons to be part of the keyboard navigation, then each on of them should have the igxRowEditTabStopDirective.
<ng-template igxRowEditActions let-endRowEdit>
<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>
Using igxRowEditActions directive will change edit actions for both editing and adding overlay buttons.
In most remote data scenarios the Primary Key assignment happens on the create server request. In this case the added records on the client will not have the final primary key value until saved on the server's data base. In that case the recommended way to handle this update in the Grid is as follows:
If the Grid does not use transactions.
Once the create request is successfully completed and returns the added record data, you can replace that record's id in the local data record instance.
If the Grid uses transactions.
Once the create request or batch update request is successfully completed and returns the added record instances (with their db generated ids), the related ADD transactions should be cleared from the transaction log using the clear API method. This is necessary because the local transaction will have a generated id field, which may differ than the one created in the data base, so they should be cleared. You can then add the record(s) passed in the response to the local data instance.
This will ensure that the remotely generated ids are always reflected in the local data, and subsequent update/delete operations target the correct record ids.
StylingThe row adding UI comprises the buttons in the IgxActionStrip editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4