Web Components 계층적 그리드 편집

Web Components 계층적 그리드의 Ignite UI for Web Components 셀 편집 기능을 사용하면 레코드 만들기, 업데이트 및 삭제와 같은 데이터 조작 작업을 쉽게 수행할 수 있습니다. IgcHierarchicalGridComponent 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.

• 셀 편집
• 행 편집
• 일괄 편집(출시 예정)

설정

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

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

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

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

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

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

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

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

템플릿 편집

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

• ​string 데이터 유형의 경우 기본 템플릿은 IgcInputComponent 사용합니다.
• ​number 데이터 유형의 경우 기본 템플릿은 IgcInputComponent type="number"를 사용하므로 숫자로 구문 분석할 수 없는 값으로 셀을 업데이트하려고 하면 변경 사항이 삭제되고 셀의 값은 0으로 설정합니다.
• ​date 데이터 유형의 경우 기본 템플릿은 IgcDatePickerComponent 사용합니다.
• ​dateTime 데이터 유형의 경우 기본 템플릿은 DateTimeEditor 사용합니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다.
• ​time 데이터 유형의 경우 기본 템플릿은 TimePicker 사용합니다.
• ​boolean 데이터 유형의 경우 기본 템플릿은 IgcCheckboxComponent 사용합니다.
• ​currency 데이터 유형의 경우 기본 템플릿은 애플리케이션 또는 그리드 로케일 설정을 기반으로 하는 접두사/접미사 구성과 함께 InputGroup 사용합니다.
• ​percent 데이터 유형의 경우 기본 템플릿은 편집된 값의 미리 보기를 백분율로 표시하는 접미사 요소와 함께 InputGroup 사용합니다.

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

이벤트 인수 및 순서

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

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

이벤트 취소

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

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

EXAMPLE

TS

HTML

CSS

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcRowSelectionEventArgs, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        this.webHierarchicalGridRendered = this.webHierarchicalGridRendered.bind(this);
        this.webHierarchicalGridRowEditEnter = this.webHierarchicalGridRowEditEnter.bind(this);
        this.webHierarchicalGridRowEdit = this.webHierarchicalGridRowEdit.bind(this);
        this.webHierarchicalGridRowEditDone = this.webHierarchicalGridRowEditDone.bind(this);
        this.webHierarchicalGridRowEditExit = this.webHierarchicalGridRowEditExit.bind(this);
        this.webHierarchicalGridCellEditEnter = this.webHierarchicalGridCellEditEnter.bind(this);
        this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this);
        this.webHierarchicalGridCellEditExit = this.webHierarchicalGridCellEditExit.bind(this);
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;
        this.webRowIslandGridRowEditEnter = this.webRowIslandGridRowEditEnter.bind(this);
        this.webRowIslandGridRowEdit = this.webRowIslandGridRowEdit.bind(this);
        this.webRowIslandGridRowEditDone = this.webRowIslandGridRowEditDone.bind(this);
        this.webRowIslandGridRowEditExit = this.webRowIslandGridRowEditExit.bind(this);
        this.webRowIslandGridCellEditEnter = this.webRowIslandGridCellEditEnter.bind(this);
        this.webRowIslandGridCellEdit = this.webRowIslandGridCellEdit.bind(this);
        this.webRowIslandGridCellEditExit = this.webRowIslandGridCellEditExit.bind(this);

        this._bind = () => {
            hierarchicalGrid.data = this.singersData;
            hierarchicalGrid.addEventListener("rendered", this.webHierarchicalGridRendered);
            hierarchicalGrid.addEventListener("rowEditEnter", this.webHierarchicalGridRowEditEnter);
            hierarchicalGrid.addEventListener("rowEdit", this.webHierarchicalGridRowEdit);
            hierarchicalGrid.addEventListener("rowEditDone", this.webHierarchicalGridRowEditDone);
            hierarchicalGrid.addEventListener("rowEditExit", this.webHierarchicalGridRowEditExit);
            hierarchicalGrid.addEventListener("cellEditEnter", this.webHierarchicalGridCellEditEnter);
            hierarchicalGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit);
            hierarchicalGrid.addEventListener("cellEditExit", this.webHierarchicalGridCellEditExit);
            rowIsland.addEventListener("rowEditEnter", this.webRowIslandGridRowEditEnter);
            rowIsland.addEventListener("rowEdit", this.webRowIslandGridRowEdit);
            rowIsland.addEventListener("rowEditDone", this.webRowIslandGridRowEditDone);
            rowIsland.addEventListener("rowEditExit", this.webRowIslandGridRowEditExit);
            rowIsland.addEventListener("cellEditEnter", this.webRowIslandGridCellEditEnter);
            rowIsland.addEventListener("cellEdit", this.webRowIslandGridCellEdit);
            rowIsland.addEventListener("cellEditExit", this.webRowIslandGridCellEditExit);
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    public webHierarchicalGridRendered(args:any): void {
        const hierarchicalGrid = document.getElementById("hierarchicalGrid");
        hierarchicalGrid.parentElement.style.display = "flex";
        const container = document.createElement("div");
        container.id = "container";
        container.style.height = "80vh";
        container.style.width = "100%";
        container.style.overflow = "auto";
        hierarchicalGrid.parentElement.appendChild(container);
        const title = document.createElement("span");
        title.textContent = "Events execution sequence:";
        container.appendChild(title);
    }

    public webHierarchicalGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEditEnter' with 'RowID':` + args.detail.rowID;
        container.appendChild(message);
    }

    public webHierarchicalGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEdit'`;
        container.appendChild(message);
    }

    public webHierarchicalGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEditDone'`;
        container.appendChild(message);
    }

    public webHierarchicalGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEditExit'  << End of cycle >>`;
        container.appendChild(message);
    }

    public webHierarchicalGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webHierarchicalGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webHierarchicalGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'cellEditExit'`;
        container.appendChild(message);
    }

    public webRowIslandGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEditEnter' with 'RowID':` + args.detail.rowID;
        container.appendChild(message);
    }

    public webRowIslandGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEdit'`;
        container.appendChild(message);
    }

    public webRowIslandGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEditDone'`;
        container.appendChild(message);
    }

    public webRowIslandGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEditExit'  << End of cycle >>`;
        container.appendChild(message);
    }

    public webRowIslandGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webRowIslandGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webRowIslandGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'cellEditExit'`;
        container.appendChild(message);
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid"
        row-editable="true">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string">
            </igc-column>
            <igc-column
            field="HasGrammyAward"
            header="Has Grammy Award"
            data-type="boolean">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland"
            primary-key="Album"
            row-editable="true">
                <igc-column
                field="Album"
                header="Album"
                data-type="string">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

기능 통합

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

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

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

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

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

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

API 참조

• IgcHierarchicalGridComponent

추가 리소스

• 열 데이터 유형
• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 고정
• 열 크기 조정
• 선택