Angular Tree Grid Cell Editing

Ignite UI for Angular Angular CRUD 작업을 위한 뛰어난 데이터 조작 기능과 강력한 API를 제공합니다. 기본적으로 트리 그리드는 셀 편집에 사용되며 기본 셀 편집 템플릿 덕분에 열 데이터 유형을 기반으로 다양한 편집기가 표시됩니다. 또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.

Angular Tree Grid cell editing and edit templates Example

Note

사용하여 igxCellEditor 모든 유형의 편집기 구성 요소를 사용하면 키보드 탐색 흐름이 중단됩니다. 편집 모드로 들어가는 사용자 정의 셀을 직접 편집하는 경우에도 마찬가지입니다. 이는 focus에 남아있을 것이다 cell element, 우리가 추가한 편집기 구성요소에는 없습니다. igxSelect, igxCombo 등. 이것이 바로 우리가 다음을 활용해야 하는 이유입니다. igxFocus 지시문은 셀 내 구성 요소에서 직접 포커스를 이동하고 보존합니다. a fluent editing flow 셀/행의

셀 편집

Editing through UI

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

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

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

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

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

키를 누르면 Enter;
키를 누르면 F2;
키를 누를 때 Tab;
다른 셀을 한 번 클릭하면 - 트리 그리드의 다른 셀을 클릭하면 변경 사항이 제출됩니다.
페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.

Note

수직 또는 수평으로 스크롤하거나 트리 그리드 외부를 클릭하면 셀은 편집 모드로 유지됩니다. 이는 셀 편집과 행 편집 모두에 유효합니다.

Editing through API

IgxTreeGrid API를 통해 셀 값을 수정할 수도 있지만 기본 키가 정의된 경우에만 가능합니다.

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

셀을 업데이트하는 또 다른 방법은 IgxGridCell의 update 방법을 직접 사용하는 것입니다.

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

Cell Editing Templates

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

셀이 편집 모드에 있을 때 적용되는 사용자 정의 템플릿을 제공하려면 igxCellEditor 지시문을 사용할 수 있습니다. 이렇게 하려면 igxCellEditor 지시문이 표시된 ng-template 전달하고 사용자 정의 컨트롤을 cell.editValue에 올바르게 바인딩해야 합니다.

<igx-column field="class" header="Class" [editable]="true">
    <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select class="cell-select" [(ngModel)]="cell.editValue" [igxFocus]="true">
            <igx-select-item *ngFor="let class of classes" [value]="class">
                {{ class }}
            </igx-select-item>
        </igx-select>
    </ng-template>
</igx-column>

이 코드는 아래 샘플에서 사용됩니다. IgxSelectComponent 세포에서 Race, Class 그리고 Alignment 열.

Note

편집 모드에서 셀의 editValue에 대한 변경 사항은 종료 시 적절한 편집 이벤트를 트리거하고 트랜잭션 상태에 적용됩니다(트랜잭션이 활성화된 경우).

Note

셀 템플릿 igxCell 편집 모드 외부에서 열의 셀이 표시되는 방식을 제어합니다. 셀 편집 템플릿 지시문 igxCellEditor는 편집 모드에서 열의 셀이 표시되는 방식을 처리하고 편집된 셀의 편집 값을 제어합니다.

Note

열과 해당 템플릿을 구성하는 방법에 대한 자세한 내용은 그리드 열 구성 설명서를 참조하세요.

CRUD operations

Note

일부 CRUD 작업을 수행하면 필터링, 정렬 및 그룹화와 같은 적용된 모든 파이프가 다시 적용되고 보기가 자동으로 업데이트된다는 점을 명심하세요.

The IgxTreeGridComponent provides a straightforward API for basic CRUD operations.

Adding a new record

Tree Grid 구성 요소는 제공된 데이터를 데이터 소스 자체에 추가하는 addRow 메서드를 노출합니다.

public addNewChildRow() {
    // Adding a new record
    // Assuming we have a `getNewRecord` method returning the new row data
    // And specifying the parentRowID.
    const record = this.getNewRecord();
    this.treeGrid.addRow(record, 1);
}

Updating data in the Tree Grid

트리 그리드의 데이터 업데이트는 updateRow 및 updateCell 메소드를 통해 이루어지지만 그리드의 기본 키가 정의된 경우에만 가능합니다. 또한 해당 update 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.

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

// Just a particular cell through the Tree Grid API
this.treeGrid.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.treeGrid.getRowByKey(rowID);
row.update(newData);

Deleting data from the Tree Grid

deleteRow() 메소드는 기본 키가 정의된 경우에만 지정된 행을 제거한다는 점을 명심하십시오.

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

이는 반드시 igx-tree-grid와 관련될 필요는 없지만 사용자 상호 작용에 연결될 수 있습니다. 예를 들어 버튼을 클릭하면 다음과 같습니다.

<button igxButton igxRipple (click)="deleteRow($event)">Delete Row</button>

Cell validation on edit event

그리드의 편집 이벤트를 사용하면 사용자가 그리드와 상호 작용하는 방식을 변경할 수 있습니다. 이 예에서는 cellEdit 이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여(event.cancel = true) 데이터 소스에 도달하지 못하게 합니다. 또한 IgxToast 사용하여 사용자 정의 오류 메시지를 표시합니다.

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

<igx-tree-grid (cellEdit)="handleCellEdit($event)"
...>
...
</igx-tree-grid>

cellEdit은 셀의 값이 커밋되려고 할 때마다 내보냅니다. handleCellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.

export class MyTreeGridEventsComponent {
    public handleCellEdit(event: IGridEditEventArgs): void {
        const column = event.column;
        if (column.field === 'Age') {
            if (event.newValue < 18) {
                event.cancel = true;
                this.toast.message = 'Employees must be at least 18 years old!';
                this.toast.open();
            }
        } else if (column.field === 'HireDate') {
            if (event.newValue > new Date().getTime()) {
                event.cancel = true;
                this.toast.message = 'The employee hire date must be in the past!';
                this.toast.open();
            }
        }
    }
}

여기서는 두 개의 열을 검증합니다. 사용자가 직원의 연령 (18세 미만) 또는 고용 날짜 (미래 날짜)에 잘못된 값을 설정하려고 하면 편집이 취소되고(값은 제출되지 않음) 오류 메시지가 포함된 토스트가 표시됩니다. .

igx-tree-grid에 적용된 위의 검증 결과는 아래 데모에서 볼 수 있습니다.

스타일링

IgxTreeGrid를 사용하면 Ignite UI for Angular를 통해 해당 셀의 스타일을 지정할 수 있습니다. 그리드의 테마는 사용자가 그리드의 다양한 측면에 스타일을 지정할 수 있도록 하는 광범위한 속성을 노출합니다.

아래 단계에서는 편집 모드에서 그리드 셀의 스타일을 지정하는 방법과 해당 스타일의 범위를 지정하는 방법을 살펴보겠습니다.

Ignite UI 테마 라이브러리를 사용하려면 먼저 전역 스타일로 테마 index 파일을 가져와야 합니다.

Importing style library

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

이제 Ignite UI for Angular에서 제공하는 모든 기능을 사용할 수 있습니다.

Defining a palette

인덱스 파일을 올바르게 가져온 후 사용할 수 있는 사용자 정의 팔레트를 만듭니다. 우리가 좋아하는 두 가지 색상을 정의하고 이를 사용하여 igx-palette 사용하여 팔레트를 만들어 보겠습니다.

$white: #fff;
$blue: #4567bb;

$color-palette: palette($primary: $white, $secondary: $blue);

Defining themes

이제 팔레트를 사용하여 테마를 정의할 수 있습니다. 셀은 grid-theme로 스타일이 지정되므로 이를 사용하여 IgxTreeGrid에 대한 테마를 생성할 수 있습니다.

$custom-grid-theme: grid-theme(
    $cell-editing-background: $blue,
    $cell-edited-value-color: $white,
    $cell-active-border-color: $white,
    $edit-mode-color: color($color-palette, "secondary", 200)
);

Applying the theme

테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass @include 문을 사용하는 것입니다.

@include grid($custom-grid-theme);

이렇게 하면 테마가 애플리케이션의 모든 그리드에 적용됩니다. 이 사용자 정의 스타일을 특정 구성 요소에만 적용하려면 테마 범위를 지정해야 합니다.

Scoped component theme

사용자 정의 테마가 특정 구성 요소에만 영향을 미치도록 하려면 방금 정의한 모든 스타일을 전역 스타일 파일에서 사용자 정의 구성 요소의 스타일 파일로 이동할 수 있습니다(수입 ~의 index 파일).

이렇게 하면 Angular의 ViewEncapsulation으로 인해 스타일이 사용자 정의 구성 요소에만 적용됩니다.

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 그리드 스타일을 지정하려면::ng-deep 사용하여 이 캡슐화를 관통해야 합니다.

Note

우리는 문을:host 스타일이 요소에 영향을 미치지 않도록 하는 선택기 밖의 우리의 구성요소:

:host {
    ::ng-deep {
            @include grid($custom-grid-theme);
        }
    }
}

Styling Demo

위 단계 외에도 igx-input-group, igx-datepicker 및 igx-checkbox 같이 셀의 편집 템플릿에 사용되는 컨트롤의 스타일을 지정할 수도 있습니다.

Note

샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

Angular Tree Grid Cell Editing