Angular Tree Grid Editing

Ignite UI for Angular 레코드 생성, 업데이트 및 삭제와 같은 데이터 조작 작업을 수행하는 간편한 방법을 제공합니다. 데이터 조작 단계는 Cell Editing, Row Editing 및 Batch Editing 입니다. Tree Grid는 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공개 API를 제공합니다. 또한 Cell Editing은 igxCellEditor 지시문 또는 igxRow 지시문을 통해 쉽게 사용자 지정할 수 있는 열 데이터 유형을 기반으로 여러 기본 편집기를 노출합니다.

Setup

In order to specify which edit mode should be enabled, the Tree Grid exposes the following boolean properties - editable and rowEditable.

편집 가능한 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

false- 해당 열의 편집이 비활성화됩니다. /기본값/
true- 해당 열에 대한 편집이 활성화됩니다.

열을 편집할 수 없는 경우에도 트리 그리드에 의해 노출된 공개 API를 통해 해당 값을 수정할 수 있습니다.

rowEditable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

false- 해당 그리드의 행 편집이 비활성화됩니다. /기본값/
true- 해당 그리드의 행 편집이 활성화됩니다.

Tree Grid에서 rowEditable 속성을 true로 설정하고 editable 속성이 어떤 열에도 명시적으로 정의되어 있지 않으면 기본 키를 제외한 모든 열에 대해 편집이 활성화됩니다.

셀 편집 및 행 편집 모드 모두에서 그리드의 일괄 편집을 활성화할 수 있습니다. 일괄 편집을 설정하려면 그리드에 TransactionService 를 제공해야 합니다.

셀 및 일괄 편집- 이 시나리오에서는 각 셀의 모든 단일 수정 사항이 별도로 보존되며 실행 취소/다시 실행 작업이 셀 수준에서 가능합니다.
행 및 일괄 편집- 이 시나리오에서는 수정 사항이 행 수준에서 유지되므로 실행 취소/다시 실행 작업은 수정된 각 셀에 대해 작동하지 않고 각 행의 여러 셀에 대해 작동합니다.

Editing Templates

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:

For string data type, default template is using igxInput
For number 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.
For date data type, default template is using igxDatePicker
For dateTime 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.
For date data type, default template is using IgxDatePicker component.
For time - data type, default template is using IgxTimePicker component.
For boolean data type, default template is using igxCheckbox
For currency data type, default template is using IgxInputGroup with prefix/suffix configuration based on application or grid locale settings.
For percent data type, default template is using IgxInputGroup with suffix element that shows a preview of the edited value in percents.
사용자 정의 템플릿의 경우 셀 편집 항목을 참조하세요.

사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.

날짜-시간 열의 기본 템플릿 편집기Default template editors of date-time columns

The 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>

Event arguments and sequence

그리드는 편집 경험을 더 효과적으로 제어할 수 있는 다양한 이벤트를 표시합니다. 이러한 이벤트는 행 편집 및 셀 편집 수명 주기 동안(편집 작업을 시작, 커밋 또는 취소할 때) 발생합니다.

이벤트	설명	인수	취소 가능
`rowEditEnter`	만약에`rowEditing` 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다.	IGridEditEventArgs	`true`
`cellEditEnter`	셀이 편집 모드로 들어갈 때 발생합니다(이후`rowEditEnter`)	IGridEditEventArgs	`true`
`cellEdit`	값이 변경되면 셀 값이 커밋되기 직전에 실행 됩니다(예:`Enter`)	IGridEditEventArgs	`true`
`cellEditDone`	값이 변경되면 셀이 편집되고 셀 값이 커밋 된 후에 실행됩니다.	IGridEditDoneEventArgs	`false`
`cellEditExit`	셀이 편집 모드를 종료할 때 발생합니다.	IGridEditDoneEventArgs	`false`
`rowEdit`	만약에`rowEditing` 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:`Done` 행 편집 오버레이의 버튼)	IGridEditEventArgs	`true`
`rowEditDone`	만약에`rowEditing` 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에 실행 됩니다.	IGridEditDoneEventArgs	`false`
`rowEditExit`	만약에`rowEditing` 활성화되면 행이 편집 모드를 종료할 때 실행됩니다.	IGridEditDoneEventArgs	`false`

Event cancellation

RowEditEnter - 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.

다음 샘플은 실제 편집 실행 순서를 보여줍니다.

Features integration

셀/행이 편집 모드에 있는 동안 사용자는 다양한 방법으로 그리드와 상호 작용할 수 있습니다. 다음 표에서는 특정 상호 작용이 현재 편집에 어떤 영향을 미치는지 지정합니다.

트리 그리드	필터링	정렬	페이징	움직이는	고정	숨김	그룹화 기준	크기 조정	탈출하다	입력하다	F2	탭	셀 클릭	새 행 추가/삭제/수정
편집 모드 유지								✔
편집 모드 종료	✔	✔	✔	✔	✔	✔	✔		✔	✔	✔	✔	✔	✔
저지르다										✔	✔	✔	✔	✔
버리다	✔	✔	✔	✔	✔	✔	✔		✔

표에서 볼 수 있듯이 열 크기 조정을 제외한 모든 상호 작용은 편집을 종료하고 새 값을 삭제합니다. 새 값이 커밋되어야 하는 경우 개발자는 해당 기능 "-ing" 이벤트에서 이를 수행할 수 있습니다.

셀/행이 편집 모드에 있는 동안 사용자가 열을 정렬하려고 시도하는 경우 새 값을 커밋하는 방법의 예:

<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);
}

API References

Additional Resources

수색