Angular Tree Grid Cell Editing

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

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

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

    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 지침을이 활용할 수 있습니다. 이를 위해서는 지시문으로ng-template 표시된 명령을igxCellEditor 전달하고, 커스텀 컨트롤을 다음과 같은 곳에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

    다음과 같이igxCellEditor 어떤 종류의 에디터 컴포넌트를 사용하든 키보드 내비게이션 흐름이 방해받을 수 있습니다. 편집 모드에 들어가는 커스텀 셀의 직접 편집도 마찬가지입니다. 이는focus 계속cell element, 우리가 추가한 에디터 컴포넌트에서는 그렇지 않습니다 -igxSelect,igxCombo 등. 이것이 바로 우리가 레버리지를 활용해야 하는 이유입니다.igxFocus이 지시는 집중을 세포 내 구성 요소로 직접 이동시키고 보존합니다a fluent editing flow 감방/행의 구역입니다.

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

    CRUD operations

    Note

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

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

    Adding a new record

    The Tree Grid component exposes the addRow method which will add the provided data to the data source itself.

    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

    Updating data in the Tree Grid is achieved through updateRow and updateCell methods but only if primary key for the grid is defined. You can also directly update a cell and/or a row value through their respective update methods.

    // 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 결과는 아래 데모에서 확인할 수 있습니다:

    스타일링

    The IgxTreeGrid allows for its cells to be styled through the Ignite UI for Angular Theme Library. The grid's grid-theme exposes a wide range of properties, which allow users to style many different aspects of the grid.

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

    을 사용하려면Ignite UI Theming Library 먼저 전역 스타일로 테마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

    인덱스 파일을 제대로 가져오면, 사용할 수 있는 커스텀 팔레트를 만듭니다. 우리가 좋아하는 세 가지 색상을 정의하고 이를 사용해 팔레트palette를 만들어봅시다:

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

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

    Defining themes

    We can now define the theme using our palette. The cells are styled by the grid-theme, so we can use that to generate a theme for our 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);

    Demo

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

    Note

    샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

    API References

    Additional Resources