Web Components 계층적 그리드 편집

    Web Components 계층 그리드의 Ignite UI for Web Components 셀 편집 기능은 레코드 생성, 업데이트, 삭제와 같은 데이터 조작 작업을 쉽게 수행할 수 있는 방법을 제공합니다. 이IgcHierarchicalGridComponent API는 이러한 작업을 수행하는 방식을 맞춤화할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다:

    Setup

    어떤 편집 모드를 활성화해야 하는지 지정하기 위해, 는IgcHierarchicalGridComponent 다음과 같은 불리언 속성 -editableandrowEditable를 노출합니다.

    이 속성은editable 다음과 같은 옵션을 지정할 수 있게 해줍니다:

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

    만약 열이 편집이 불가능하다면, 공개 APIIgcHierarchicalGridComponent를 통해 그 열의 값을 수정할 수 있다는 점을 기억하세요.

    이 속성은rowEditable 다음과 같은 옵션을 지정할 수 있게 해줍니다:

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

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

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

    Editing Templates

    데이터 타입별 편집 템플릿을 사용하고 싶다면, 해당 열의dataType 속성을 지정해야 합니다. 이제 각 유형별 기본 템플릿이 무엇인지 살펴보겠습니다:

    • 데이터 타입은string 기본 템플릿이 사용됩니다IgcInputComponent.
    • 데이터 타입의number 기본 템플릿은 type="number"를 사용IgcInputComponent 하므로, 셀을 파싱할 수 없는 값으로 업데이트하려 하면 변경이 버려지고 셀 값이 0으로 설정됩니다.
    • 데이터 타입의date 기본 템플릿은 다음과 같습니다.IgcDatePickerComponent
    • 데이터 타입은dateTime 기본 템플릿이 사용됩니다DateTimeEditor. 이 편집기는 DateTime 객체의 입력 요소 부분에 대한 마스크 지침을 제공합니다.
    • Fortime- 데이터 타입, 기본 템플릿은 사용TimePicker 중입니다.
    • 데이터 타입은boolean 기본 템플릿이 사용됩니다IgcCheckboxComponent.
    • 데이터 타입의 경우currency, 기본 템플릿은 애플리케이션 또는 그리드 로컬 설정에 기반한 접두사/접미사 구성을 사용합니다InputGroup.
    • 데이터 타입의 경우percent, 기본 템플릿은 편집된 값을 백분 단위로 미리보기하는 접미사 요소를 사용합니다InputGroup.

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

    Event Arguments and Sequence

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

    이벤트 설명 인수 취소 가능
    RowEditEnter 만약에RowEditing 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다. IgcGridEditEventArgs **참*-
    CellEditEnter 셀이 편집 모드로 들어갈 때 발생합니다(이후RowEditEnter) IgcGridEditEventArgs **참*-
    CellEdit 값이 변경되면 셀의 값이 커밋 되기 직전에 실행됩니다(예: 를 누르기 ENTER). IgcGridEditEventArgs **참*-
    CellEditDone 값이 변경되면, 셀이 편집되고 셀 값이 **커밋됨*이 된 후에 실행됩니다- IgcGridEditDoneEventArgs **거짓*-
    CellEditExit 셀이 **편집 모드에서 나올 때 발동*- IgcGridEditDoneEventArgs **거짓*-
    RowEdit 만약에RowEditing 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:Done 행 편집 오버레이의 버튼) IgcGridEditEventArgs **참*-
    RowEditDone 만약에RowEditing 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에​ ​실행 됩니다. IgcGridEditDoneEventArgs **거짓*-
    RowEditExit 활성화된 경우RowEditing, 행이 **편집 모드에서 나가*- IgcGridEditDoneEventArgs **거짓*-

    Event Cancellation

    • RowEditEnter- 편집Row​Cell 모드에 들어가지 않습니다.
    • CellEditEnter- 셀 편집 입력을 방지합니다. 활성화되면rowEditable 행 편집이 트리거되지만, 셀 편집은 여전히 금지됩니다.
    • CellEdit- 허용Cell 및/또는Row 편집, 완료 버튼이나 Enter 버튼을 눌러도 값이나 행 트랜잭션이 커밋되지 않습니다. 셀 편집과 행 편집은 취소 버튼을 눌러야 닫히지 않습니다.
    • RowEdit- 셀 커밋은 가능하지만 전체 행은 불가능해. 행은 편집 모드로 유지되며, 해당 행 거래는 열린 것으로 간주됩니다. 완료 버튼을 누르는 것은 해당 행을 확정하거나 닫는 것이 아닙니다. 취소 버튼은 변경 사항을 커밋하지 않고 편집 과정과 트랜잭션을 종료합니다.

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

    Features integration

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

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

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

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

    <igc-hierarchical-grid id="grid" primary-key="ProductID" >
</igc-hierarchical-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.data = this.data;
    grid.addEventListener("sorting", this.onSorting);
}

public onSorting(event: IgcSortingEventArgs) {
    var grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.endEdit(true);
}

    API References

    Additional Resources