Web Components 그리드 행 편집

    웹 구성 요소 그리드의 Web Components 요소 행 편집 기능을 Ignite UI for Web Components 하면 IgcGridComponent 내에서 직접 데이터를 편집할 수 있습니다. 데이터를 조작하는 편리한 방법 외에도 전체 CRUD 작업을 위한 강력한 API가 있습니다. 행을 클릭하고 Enter 키를 눌러 그리드 행 편집을 수행할 수 있습니다. 또 다른 빠른 방법은 수정해야 할 행을 마우스로 두 번 클릭하는 것입니다.

    Web Components Grid Row Editing Example

    다음 샘플은 IgcGridComponent에서 행 편집을 활성화하는 방법을 보여줍니다. 셀 값을 변경한 다음 동일한 행의 다른 셀을 클릭하거나 탐색하면 완료 버튼을 사용하여 확인하거나 취소 버튼을 사용하여 삭제될 때까지 행 값이 업데이트되지 않습니다.

    [!Note] When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode.

    Row Editing Usage

    바인딩된 데이터 소스와 rowEditable true로 설정된 IgcGridComponent를 정의합니다.

    <igc-grid id="grid" primary-key="ProductID" width="100%" height="500px" row-editable="true">
    <igc-column field="ProductID" header="Product ID" editable="false"></igc-column>
    <igc-column field="ReorderLevel" header="Reorder Level" data-type="number"></igc-column>
    <igc-column field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="unitsInStock" field="UnitsInStock" header="Units In Stock" data-type="number"></igc-column>
    <igc-column field="OrderDate" field="Order Date" data-type="date"></igc-column>
    <igc-column field="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

    constructor() {
    var grid  = document.getElementById('grid') as IgcGridComponent;
    var unitsInStock = document.getElementById('unitsInStock') as IgcColumnComponent;
    grid.data = this.data;
    unitsInStock.bodyTemplate = this.unitsInStockCellTemplate;
}

public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => {
    return html`<input name="units" value="${ctx.cell.value}" style="color: black" />`;
}

    [!Note] Setting primary key is mandatory for row editing operations.

    [!Note] Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgcGridComponent, all rows, with defined field property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the editable input of that column to false.

    [!Note] The IgcGridComponent utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

    Positioning

    • 오버레이의 기본 위치는 편집 모드에 있는 행 아래에 있습니다.

    • 행 아래에 공간이 없으면 행 위에 오버레이가 나타납니다.

    • 상단 또는 하단에 표시된 오버레이는 오버레이가 닫힐 때까지 스크롤하는 동안 이 위치를 유지합니다.

    Behavior

    • 행이 편집 모드인 경우 동일한 행의 셀을 클릭하면 편집이 계속됩니다.

    • "완료" 버튼을 클릭하면 행 편집이 완료되고 데이터 소스 또는 가능한 경우 트랜잭션에 변경 사항이 제출됩니다. 또한 행은 편집 모드를 종료합니다.

    • "취소" 버튼을 클릭하면 행의 현재 변경 사항이 모두 되돌려지고 행은 편집 모드를 종료합니다.

    • 행이 편집 모드인 경우 다른 행의 셀을 클릭하면 현재 행 편집이 완료되고 새 행 변경 사항이 제출됩니다("완료" 버튼을 클릭하는 것과 동일한 동작). 포커스를 받은 새 셀이 편집 가능하면 새 행도 편집 모드로 들어가고, 셀을 편집할 수 없으면 이전 행만 편집 모드에서 나갑니다.

    • 행이 편집 모드에 있고 IgcGridComponent 스크롤되어 행이 가시 영역 밖으로 나가면 후자는 여전히 편집 모드에 있습니다. IgcGridComponent 스크롤되어 행이 다시 표시되면 행은 여전히 편집 모드에 있습니다. IgcGridComponent 외부를 클릭하면 셀도 편집 모드로 유지됩니다.

    • ​정렬, 필터링, 검색 및 숨기기 작업을 수행하면 행의 모든 현재 변경 사항이 되돌려지고 행은 편집 모드를 종료합니다.

    • ​페이징, 크기 조정, 고정 및 이동 작업을 수행하면 편집 모드가 종료되고 최신 값이 제출됩니다.

    • 수정된 각 셀은 행 편집이 완료될 때까지 편집된 스타일을 갖습니다. IgcGridComponent 트랜잭션과 함께 제공되지 않을 때의 동작입니다. 트랜잭션을 사용할 수 있는 경우 모든 변경 사항이 커밋될 때까지 셀 편집 스타일이 적용됩니다.

    Keyboard Navigation

    • Enter를 누르고 F2를 누르면 행 편집 모드로 들어갑니다.

    • Esc는 행 편집 모드를 종료하고 행이 편집 모드에 있는 동안 수행된 셀 변경 사항을 제출하지 않습니다.

    • Tab을 사용 하여 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

    Feature Integration

    • 모든 데이터 변경 작업은 행 편집 작업을 종료하고 현재 행 변경 사항을 제출합니다. 여기에는 정렬, 그룹화 및 필터링 기준 변경, 페이징 등과 같은 작업이 포함됩니다.

    • 행 편집이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 기능에도 동일하게 적용됩니다.

    • 그룹화된 행을 확장하거나 축소해도 현재 행의 편집이 종료되지 않습니다.

    Customizing Row Editing Overlay

    Customizing Text

    템플릿을 사용하여 행 편집 오버레이의 텍스트를 사용자 정의할 수 있습니다.

    ​RowChangesCount 속성이 노출되고 변경된 셀 수를 보유합니다.

    public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
    return html`Changes: ${ctx.implicit}`;
}

    Customizing Buttons

    템플릿을 통해 행 편집 오버레이의 버튼을 사용자 정의할 수도 있습니다.

    public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => {
    const endRowEdit = ctx.implicit;
    return html`
        <button @click="${(event) => endRowEdit(false, event)}">Cancel</button>
        <button @click="${(event) => endRowEdit(true, event)}">Apply</button>
    `;
}

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <igc-grid class="grid"></igc-grid>

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}

    Demo

    Known Issues and Limitations

    • 그리드에 primaryKey 설정되지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃습니다. 요청이 완료되었습니다:
    • 행 선택
    • 행 확장/축소
    • 행 편집
    • 행 고정

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.