Web Components 계층적 그리드 셀 편집

Web Components 계층적 그리드의 Ignite UI for Web Components 셀 편집은 Web Components 계층적 그리드 구성 요소 내에서 개별 셀의 콘텐츠에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱의 기본 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있습니다. 기본적으로 Ignite UI for Web Components의 그리드는 셀 편집에 사용됩니다. 그리고 기본 셀 편집 템플릿으로 인해 열 데이터 유형 Top of Form에 따라 다른 편집기가 있습니다.

또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.

Web Components Hierarchical Grid Cell Editing and Edit Templates Example

셀 편집

Editing through UI

다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.

• 두 번 클릭하면;
• 한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
• 키 누름 ENTER 시;
• 키를 누르면 F2;

다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.

• 키를 누를 때 Escape;
• ​정렬, 필터링, 검색 및 숨기기 작업을 수행할 때;

다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.

• 키 누름 ENTER 시;
• 키를 누르면 F2;
• 키 누름 TAB 시;
• 다른 셀로 한 번 클릭하면 - 다른IgcHierarchicalGridComponent 셀을 클릭하면 변경 사항이 제출됩니다.
• 페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.

[!Note] The cell remains in edit mode when you scroll vertically or horizontally or click outside the IgcHierarchicalGridComponent. This is valid for both cell editing and row editing.

Editing through API

또한 기본 키가 정의되어 있을 때만 API를 통해IgcHierarchicalGridComponent 셀 값을 수정할 수 있습니다:

public updateCell() {
    this.hierarchicalGrid.updateCell(newValue, rowID, 'Age');
}

셀을 업데이트하는 또 다른 방법은 다음과 같은 방법을Update 직접 사용하는Cell 것입니다:

public updateCell() {
    const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel');
    // You can also get cell by rowID if primary key is defined
    // cell = this.hierarchicalGrid.getCellByKey(rowID, 'ReorderLevel');
    cell.update(70);
}

Cell Editing Templates

​일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.

셀에 적용될 사용자 정의 템플릿을 제공하려는 경우 해당 템플릿을 셀 자체나 헤더에 전달할 수 있습니다. 먼저 평소와 같이 열을 만듭니다.

<igc-column
    field="Age"
    data-type="string"
    editable="true"
    id="column1">
</igc-column>

index.ts 파일의 이 열에 템플릿을 전달합니다.

constructor() {
    var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
    var column1 = document.getElementById('column1') as IgcColumnComponent;

    hierarchicalGrid.data = this.singersData;
    column1.inlineEditorTemplate = this.webGridCellEditCellTemplate;
}

public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
    let cellValues: any = [];
    let uniqueValues: any = [];
    for(const i of (this.singersData as any)){
        const field: string = ctx.cell.column.field;
        if(uniqueValues.indexOf(i[field]) === -1 )
        {
            cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
            uniqueValues.push(i[field]);
        }
    }
    return html`
    <igc-select style="width:100%; height:100%" size="large" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>
            ${cellValues}
    </igc-select>
    `;
}

추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.

CRUD operations

[!Note] Please keep in mind that when you perform some CRUD operation all of the applied pipes like filtering, sorting and grouping will be re-applied and your view will be automatically updated.

기본IgcHierarchicalGridComponent CRUD 작업을 위한 직관적인 API를 제공합니다.

Adding a new record

​IgcHierarchicalGridComponent이 컴포넌트는 제공된 데이터를 데이터 소스에 추가하는 메서드를AddRow 노출합니다.

public addRow() {
    // Adding a new record
    // Assuming we have a `getNewRecord` method returning the new row data
    const record = this.getNewRecord();
    this.hierarchicalGrid.addRow(record);
}

Updating data in the Hierarchical Grid

계층 격자에서 데이터를 업데이트하는 것은 다음과 같이 이루어집니다.updateRow 그리고updateCell 방법론이지만 그리드의 PrimaryKey가 정의될 때만. 셀이나 행 값을 해당 값을 직접 업데이트할 수도 있습니다 업데이트 방법.

// Updating the whole row
this.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID);

// Just a particular cell through the Grid API
this.hierarchicalGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);

// Directly using the cell `update` method
this.selectedCell.update(newData);

// Directly using the row `update` method
const row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);

Deleting data from the Hierarchical Grid

메서드는 adeleteRow가 정의된 경우에만 지정된 행을 제거한다는 점을 기억primaryKey 해 주세요.

// Delete row through Grid API
this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();

Cell Validation on Edit Event

theIgcHierarchicalGridComponent의 편집 이벤트를 이용해 사용자가 theIgcHierarchicalGridComponent와 상호작용하는 방식을 변경할 수 있습니다.

이 예시에서는 이벤트에CellEdit 결합하여 입력된 데이터를 바탕으로 셀을 검증합니다. 새로운 셀 값이 미리 정의된 기준을 충족하지 못하면, 이벤트를 취소하여 데이터 소스에 도달하지 못하게 합니다.

가장 먼저 해야 할 일은 그리드의 이벤트에 바인딩하는 것입니다.

constructor() {
    var hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
    this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this);
    hGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit);
}

​CellEdit​어떤 셀의 값이 커밋될 때면 방출됩니다. CellEdit 정의에서는 어떤 조치를 취하기 전에 특정 열을 반드시 확인해야 합니다:

​주문 단위 열 아래의 셀에 입력된 값이 사용 가능한 금액(재고 단위 아래의 값)보다 큰 경우 편집이 취소되고 사용자에게 취소 알림이 표시됩니다.

public webHierarchicalGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
    const today = new Date();
    const column = event.detail.column;
    if (column.field === 'Debut') {
        if (event.detail.newValue > today.getFullYear()) {
            event.detail.cancel = true;
            alert('The debut date must be in the past!');
        }
    } else if (column.field === 'LaunchDate') {
        if (event.detail.newValue > today) {
            event.detail.cancel = true;
            alert('The launch date must be in the past!');
        }
    }
}

위 검증IgcHierarchicalGridComponent 결과는 아래 데모에서 확인할 수 있습니다:

Styling

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

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

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

.hierarchicalGrid {
    --ig-grid-edit-mode-color: orange;
    --ig-grid-cell-editing-background: lightblue;
}

Styling Example

API References

• IgcHierarchicalGridComponent

• IgcDatePickerComponent

Additional Resources