Ignite UI for Angular Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The data manipulation phases are: Cell Editing, Row Editing, and Batch Editing. The Grid gives you a powerful public API which allows you to customize the way these operations are performed. Additionally, Cell editing exposes several default editors based on the column data type, that could be easily customized via igxCellEditor directive or igxRow directives.
SetupIn order to specify which edit mode should be enabled, the Grid exposes the following boolean properties - editable and rowEditable.
Property editable enables you to specify the following options:
Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the Grid.
Property rowEditable enables you to specify the following options:
In the Grid if you set rowEditable property to true, and editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the primary key.
Batch editing in the grid can be enabled for both cell editing and row editing modes. In order to set up batch editing it is necessary to provide to the grid a TransactionService.
If you want to use a data type specific edit templates, you should specify the column dataType property. So let's now see what are the default templates for each type:
string data type, default template is using igxInputnumber data type, default template is using igxInput type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0.date data type, default template is using igxDatePickerdateTime data type, default template is using IgxDateTimeEditor directive. This editor will give you a mask directions for the input elements part of the DateTime object.date data type, default template is using IgxDatePicker component.time - data type, default template is using IgxTimePicker component.boolean data type, default template is using igxCheckboxcurrency data type, default template is using IgxInputGroup with prefix/suffix configuration based on application or grid locale settings.percent data type, default template is using IgxInputGroup with suffix element that shows a preview of the edited value in percents.All available column data types could be found in the official Column types topic.
Default template editors of date-time columnsThe template editors of date, dateTime and time column data types use a default input format as per the IgxGrid's locale.
In case the pipeArgs object format property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only.
If the editors input format should be explicitly set, the editorOptions object of type IColumnEditorOptions can be leveraged. It accepts a dateTimeFormat property that is used as input format for the editors of date, dateTime and time column data types.
const editorOptions: IColumnEditorOptions = {
dateTimeFormat: 'MM/dd/YYYY',
}
<igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>
The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the Row Editing and Cell Editing lifecycle - when starting, committing or canceling the editing action.
Event cancelationRowEditEnter - Neither Row nor Cell will enter edit mode.CellEditEnter - Prevents entering cell edit. If rowEditable is enabled, row edit will be triggered, although cell edit will remain forbidden.CellEdit - Allowed Cell/Row edit, hitting Done button or Enter won't commit the value or row transaction. Cell editing and Row editing won't be closed until Cancel button is clicked.RowEdit - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting Done does not commit or close the row. Cancel button closes the editing process and the transaction without committing the changes.The following sample demonstrates the editing execution sequence in action:
Features integrationWhile a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing:
Grid Filtering Sorting Paging Moving Pinning Hiding GroupBy Resizing Escape Enter F2 Tab Cell Click Add new row/Delete/Edit Keep edit mode â Exit edit mode â â â â â â â â â â â â â Commit â â â â â Discard â â â â â â â âAs seen from the table, all interactions, except resizing a column, will end the editing and will discard the new values. Should the new value be committed, this can be done by the developer in the corresponding feature "-ing" event.
Example how to commit new values, if user tries to sort the column while a cell/row is in edit mode:
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" (sorting)="onSorting($event)">
...
</igx-grid>
public onSorting(event: ISortingEventArgs) {
this.grid.endEdit(true);
// (event.owner as IgxGridComponent).endEdit(true);
}
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