Web Components 그리드 편집

    웹 Web Components Ignite UI for Web Components 생성, 업데이트 및 삭제와 같은 데이터 조작 작업을 수행하는 쉬운 방법을 제공합니다. IgcGridComponent는 이러한 작업이 수행되는 방식을 사용자 정의할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.

    Setup

    활성화해야 하는 편집 모드를 지정하기 위해 IgcGridComponent​ ​editable 및 rowEditable과 같은 부울 속성을 노출합니다.

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

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

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

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

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

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

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

    Editing Templates

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

    • ​string 데이터 유형의 경우 기본 템플릿은 IgcInputComponent 사용합니다.
    • ​number 데이터 유형의 경우 기본 템플릿은 IgcInputComponent type="number"를 사용하므로 숫자로 구문 분석할 수 없는 값으로 셀을 업데이트하려고 하면 변경 사항이 삭제되고 셀의 값은 0으로 설정합니다.
    • ​date 데이터 유형의 경우 기본 템플릿은 IgcDatePickerComponent 사용합니다.
    • ​dateTime 데이터 유형의 경우 기본 템플릿은 DateTimeEditor 사용합니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다.
    • ​time 데이터 유형의 경우 기본 템플릿은 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 Cancelation

    • RowEditEnter- 둘 다 편집 모드로 들어가지 않습니다 Row​ ​Cell.
    • CellEditEnter- 셀 편집 입력을 방지합니다. rowEditable 활성화되면 행 편집이 트리거되지만 셀 편집은 계속 금지됩니다.
    • CellEdit- 허용 Cell 및/또는 Row 편집, 완료 버튼 또는 Enter 키를 누르면 값 또는 행 트랜잭션이 커밋되지 않습니다. 셀 편집 및 행 편집은 취소 버튼을 클릭할 때까지 닫히지 않습니다.
    • RowEdit- 셀 커밋이 가능하지만 전체 행은 불가능합니다. 행은 편집 모드로 유지되며 행 트랜잭션은 열린 것으로 간주됩니다. 완료를 누르면 행이 커밋되거나 닫히지 않습니다. 취소 버튼은 변경 사항을 적용하지 않고 편집 프로세스와 트랜잭션을 닫습니다.

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

    Features integration

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

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

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

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

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

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

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

    API References

    Additional Resources