Angular Tree Grid Row Editing

트리 그리드는 인라인 편집과 Angular CRUD 작업을 위한 강력한 API를 통해 데이터 조작을 수행하는 편리한 방법을 제공합니다. 행을 클릭하고 Enter 키를 누르거나 수정하려는 행을 마우스로 두 번 클릭하면 됩니다.

Angular Tree Grid Row Editing Example

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

Note

행이 편집 모드에 있을 때 다른 행의 셀을 클릭하면 완료 버튼을 누른 것처럼 작동하여 이전 행의 모든 변경 사항을 제출합니다. 포커스를 받은 새 셀이 편집 가능하면 새 행도 편집 모드로 들어가고, 셀을 편집할 수 없으면 이전 행만 편집 모드에서 나갑니다.

Row Editing Usage

시작하려면 IgxTreeGridModule에서 app.module.ts 파일:

// app.module.ts

...
import { IgxTreeGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxTreeGridModule],
    ...
})
export class AppModule {}

그런 다음 바인딩된 데이터 소스와 rowEditable true로 설정된 트리 그리드를 정의합니다.

<igx-tree-grid [data]="data" [primaryKey]="EmployeID" [foreignKey]="PID"
               [rowEditable]="true" [rowSelection]="'multiple'" [moving]="true">
    <igx-column *ngFor="let c of columns"
        [editable] ="c.editable"
        [field]="c.field"
        [dataType]="c.dataType"
        [header]="c.label"
        [resizable]="c.resizable"
        [sortable]="c.sortable"
        [filterable]="c.filterable">
    </igx-column>
</igx-tree-grid>

Note

행 편집 작업에는 기본 키 설정이 필수입니다.

Note

개별 열에 대한 편집을 활성화할 필요는 없습니다. 트리 그리드에서 rowEditable 속성을 사용하면 기본 속성을 제외하고 정의된 field 속성이 있는 모든 행을 편집할 수 있습니다. 특정 열에 대한 편집을 비활성화하려면 editable 열의 입력을 false로 설정합니다.

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular';
// import { IgxTreeGridComponent } from '@infragistics/igniteui-angular'; for licensed package
import { FLAT_DATA } from './data';

@Component({
   providers: [],
    selector: 'app-tree-grid-row-editing-sample',
    styleUrls: ['tree-grid-row-editing-sample.component.scss'],
    templateUrl: 'tree-grid-row-editing-sample.component.html'
})
export class TreeGridRowEditSampleComponent implements OnInit {

    public data: any[];
    public columns: any[];

    @ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;
    public ngOnInit(): void {
        this.data = FLAT_DATA;

        this.columns = [
            { field: 'FirstName', label: 'First Name', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' },
            { field: 'LastName', label: 'Last Name', resizable: false, sortable: false, filterable: false, editable: true, dataType: 'string' },
            { field: 'Title', label: 'Title', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' },
            { field: 'HireDate', label: 'Hire Date', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'date' }
        ];
    }
}

Note

트리 그리드는 행 상태가 제출되거나 취소될 때까지 보류 중인 셀 변경 사항을 보관하는 공급자 IgxBaseTransactionService 내부적으로 사용합니다.

Positioning

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

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

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

Behavior

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

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

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

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

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

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

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

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

Keyboard Navigation

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

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

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

Feature Integration

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

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

Customizing Row Editing Overlay

Customizing Text

​igxRowEditTextDirective 사용하면 행 편집 오버레이의 텍스트를 사용자 정의할 수 있습니다. rowChangesCount 속성이 노출되고 변경된 셀 수를 보유합니다.

<ng-template igxRowEditText let-rowChangesCount>
	Changes: {{rowChangesCount}}
</ng-template>

Customizing Buttons

​igxRowEditActionsDirective 사용하면 행 편집 오버레이의 버튼을 사용자 정의할 수 있습니다. 버튼을 키보드 탐색의 일부로 사용하려면 각 버튼에 igxRowEditTabStopDirective가 있어야 합니다.

<ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

스타일링

​Ignite UI for Angular 사용하면 행 편집 오버레이를 크게 변경할 수 있습니다. 행 편집 오버레이는 복합 요소입니다. 해당 UI는 몇 가지 다른 구성 요소로 구성됩니다. - 콘텐츠를 렌더링하기 위한 igx-banner-igx-button은 기본 템플릿에서 렌더링됩니다(Done 및 Cancel 버튼용).

아래 예에서는 두 구성요소의 스타일 옵션([버튼 스타일링](../button.md# Angular 버튼 스타일링) 및 배너 스타일링)을 사용하여 IgxTreeGrid의 행 편집 환경을 사용자 정의합니다. 또한 현재 셀의 편집기와 배경의 스타일을 지정하여 더욱 뚜렷하게 만듭니다. 여기에서 셀 스타일 지정에 대해 자세히 알아볼 수 있습니다.

Import theme

행 편집 배너의 스타일을 지정하는 가장 쉬운 방법은 app의 전역 스타일 파일(일반적으로 styles.scss)에서 스타일을 정의하는 것입니다. 가장 먼저 해야 할 일은 themes/index 파일을 가져오는 것입니다. 이를 통해 Ignite UI for Angular의 모든 강력한 도구에 액세스할 수 있습니다.

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

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

테마 파일을 가져온 후에는 사용자 정의 테마를 만들 수 있습니다.

테마 정의

이제 행 편집 배경에 영향을 미치는 사용자 정의 banner theme 정의하고 $purple-palette 라는 사전 정의된 팔레트 중 하나를 사용할 수 있습니다.

    $my-light-gray: #e3e3e3;
    $my-banner-palette: $purple-palette;

    $banner-theme: banner-theme(
        $banner-background: $my-light-gray,
        $banner-message-color: color($my-banner-palette, "secondary", 600)
    );

여기서 우리는 사용하고 있습니다 my-banner-palette와 함께 igx-color (테마 라이브러리에 의해 노출됨) 색상을 생성하기 위한 것입니다.

Include the theme

이제 우리가 해야 할 일은 Sass @include 문을 사용하여 테마를 적용하는 것뿐입니다. 새로 정의된 $banner-theme​ ​igx-banner mixin 통해 전달합니다.

@include banner($banner-theme);

그러면 사용자 정의 배너 테마가 행 편집 오버레이에 적용됩니다. 그러나 전역 스타일 파일에서 이를 정의했으므로 이러한 스타일은 애플리케이션의 모든 배너에도 적용됩니다.

Component styles

행 편집 오버레이는 다른 구성 요소의 테마를 많이 사용하므로 전역 스타일을 통해 스타일을 지정하면 애플리케이션의 다른 부분(예: 배너, 버튼 등)에 영향을 미칠 수 있습니다. 이를 방지하는 가장 좋은 방법은 배너 테마의 범위를 지정하는 것입니다. igx-tree-grid가 포함된 구성 요소에서 스타일(theme/index 가져오기 포함)을 정의할 수 있습니다.

Note

구성요소가 Emulated ViewEncapsulation을 사용하여 이 캡슐화를 관통해야 합니다.::ng-deep 그리드의 스타일을 지정하려면 우리는 문을:host 스타일이 요소에 영향을 미치지 않도록 하는 선택기 밖의 우리의 구성요소:

// custom.component.scss

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

위 구문을 사용하면 사용자 정의 배너 테마가 그리드의 행 편집 오버레이에 올바르게 적용됩니다.

Custom Templates

행 편집 오버레이를 추가로 사용자 정의하려면 사용자 정의 템플릿을 전달하여 Done 및 Cancel 버튼의 스타일을 개별적으로 지정할 수 있습니다.

<!-- in component.html -->
<igx-tree-grid>
    <ng-template igxRowEditActions let-endRowEdit>
        <div class="custom-buttons">
            <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(false)">
                <igx-icon>clear</igx-icon>
            </button>
            <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(true)">
                <igx-icon>check</igx-icon>
            </button>
        </div>
    </ng-template>
</igx-tree-grid>

사용자 정의 버튼을 정의한 후 다음을 사용할 수 있습니다. button-theme 스타일을 지정합니다. 다음에 대해 자세히 알아볼 수 있습니다. igx-button 스타일링 여기. 우리는 우리에 대한 사용자 정의 테마를 만들 수 있습니다 Done 그리고 Cancel:

// custom.component.scss
...

$button-theme: button-theme(
  $palette: $purple-palette
);

...
.custom-buttons {
    @include button($button-theme);
  }

​Done 및 Cancel 버튼에만 적용되도록.custom-buttons에서 @include 문의 범위를 지정합니다.

Demo

배너와 버튼의 스타일을 지정한 후 편집 모드에서 셀에 대한 사용자 정의 스타일도 정의합니다. 모든 결합된 스타일의 결과는 아래에서 볼 수 있습니다.

Note

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

Known Issues and Limitations

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

API References

• 행편집 가능
• onRowEditEnter
• onRowEdit
• 행편집완료
• onRowEdit취소
• end편집
• 필드
• 편집 가능
• 기본 키
• IgxTreeGridComponent

Additional Resources

• igxGrid를 사용하여 CRUD 작업 빌드
• 트리 그리드 개요
• 트리 그리드 편집
• Tree Grid Transactions

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub