Angular 계층적 그리드 편집
Ignite UI for Angular 생성, 업데이트, 삭제와 같은 데이터 조작 작업을 수행하는 쉬운 방법을 제공합니다. 데이터 조작 단계는 셀 편집, 행 편집 및 일괄 편집 입니다. 계층형 그리드는 이러한 작업이 수행되는 방식을 사용자 정의할 수 있는 강력한 공개 API를 제공합니다. 또한 셀 편집은 열 데이터 유형을 기반으로 하는 여러 기본 편집기를 표시하며, 이는 igxCellEditor 지시문 또는 igxRow 지시문을 통해 쉽게 사용자 정의할 수 있습니다.
Setup
어떤 편집 모드를 활성화해야 하는지 지정하기 위해 계층적 그리드는 editable
및 rowEditable
과 같은 부울 속성을 노출합니다.
편집 가능한 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 열의 편집이 비활성화됩니다. /기본값/
- true- 해당 열에 대한 편집이 활성화됩니다.
열을 편집할 수 없는 경우에도 계층 그리드에 의해 노출된 공개 API를 통해 해당 값을 수정할 수 있습니다.
rowEditable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 그리드의 행 편집이 비활성화됩니다. /기본값/
- true- 해당 그리드의 행 편집이 활성화됩니다.
Hierarchical Grid에서 rowEditable 속성을 true로 설정하고 editable 속성이 어떤 열에도 명시적으로 정의되어 있지 않으면 기본 키를 제외한 모든 열에 대해 편집이 활성화됩니다.
셀 편집 및 행 편집 모드 모두에서 그리드의 일괄 편집을 활성화할 수 있습니다. 일괄 편집을 설정하려면 그리드에 TransactionService 를 제공해야 합니다.
- 셀 및 일괄 편집- 이 시나리오에서는 각 셀의 모든 단일 수정 사항이 별도로 보존되며 실행 취소/다시 실행 작업이 셀 수준에서 가능합니다.
- 행 및 일괄 편집- 이 시나리오에서는 수정 사항이 행 수준에서 유지되므로 실행 취소/다시 실행 작업은 수정된 각 셀에 대해 작동하지 않고 각 행의 여러 셀에 대해 작동합니다.
Editing Templates
데이터 유형별 편집 템플릿을 사용하려면 열 dataType
속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴보겠습니다.
-
string
데이터 유형의 경우 기본 템플릿은 igxInput을 사용합니다. -
number
데이터 유형의 경우 기본 템플릿은 igxInput type="number"를 사용하므로 숫자로 구문 분석할 수 없는 값으로 셀을 업데이트하려고 하면 변경 사항이 삭제되고 셀의 값은 0으로 설정합니다. -
date
데이터 유형의 경우 기본 템플릿은 igxDatePicker를 사용합니다. -
dateTime
데이터 유형의 경우 기본 템플릿은 IgxDateTimeEditor 지시문을 사용합니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다. -
date
데이터 유형의 경우 기본 템플릿은 IgxDatePicker 구성 요소를 사용합니다. -
time
데이터 유형의 경우 기본 템플릿은 IgxTimePicker 구성 요소를 사용합니다. -
boolean
데이터 유형의 경우 기본 템플릿은 igxCheckbox를 사용합니다. -
currency
데이터 유형의 경우 기본 템플릿은 애플리케이션 또는 그리드 로케일 설정을 기반으로 하는 접두사/접미사 구성과 함께 IgxInputGroup을 사용합니다. -
percent
데이터 유형의 경우 기본 템플릿은 편집된 값의 미리 보기를 백분율로 표시하는 접미사 요소와 함께 IgxInputGroup을 사용합니다. - 사용자 정의 템플릿의 경우 셀 편집 항목을 참조하세요.
사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.
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 cancelation
RowEditEnter
- 행이나 셀 모두 편집 모드로 들어가지 않습니다.CellEditEnter
- 셀 편집 입력을 방지합니다.rowEditable
활성화되면 행 편집이 트리거되지만 셀 편집은 계속 금지됩니다.CellEdit
- 허용된 셀/행 편집, 완료 버튼 또는 Enter를 누르면 값 또는 행 트랜잭션이 커밋되지 않습니다. 셀 편집 및 행 편집은 취소 버튼을 클릭할 때까지 닫히지 않습니다.RowEdit
- 셀 커밋이 가능하지만 전체 행은 불가능합니다. 행은 편집 모드로 유지되며 행 트랜잭션은 열린 것으로 간주됩니다. 완료를 누르면 행이 커밋되거나 닫히지 않습니다. 취소 버튼은 변경 사항을 적용하지 않고 편집 프로세스와 트랜잭션을 닫습니다.
다음 샘플은 실제 편집 실행 순서를 보여줍니다.
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
- IgxGridCell
- IgxHierarchicalGridComponent Styles
- IgxGridRow
- IgxInput 지시어
- IgxDatePicker구성 요소
- IgxDatePicker구성 요소 스타일
- IgxCheckbox구성요소
- IgxCheckbox구성 요소 스타일
- Igx오버레이
- Igx오버레이 스타일