Angular Tree Grid Row Editing

Tree Grid는 인라인 편집을 통해 데이터 조작을 수행하는 편리한 방법과 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/grids/tree-grid';
// 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 버튼으로 초점을 이동하세요. 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-buttons는 기본 템플릿(와Done 버튼에 대해Cancel)에서 렌더링됩니다.

아래 예시에서는 이 두 구성 요소의 스타일링 옵션을 활용하고,button styling​banner-styling IgxTreeGrid의 행 편집 경험을 맞춤화할 것입니다. 현재 셀의 편집기와 배경도 스타일링하여 더 뚜렷하게 만들 것입니다. 셀 스타일링에 대해 더 알고 싶다면 '셀 스타일링' 섹션에서 확인할 수 있습니다.

Import theme

행 편집 배너를 스타일링하는 가장 쉬운 방법은 보통app 저희의 글로벌 스타일 파일에서styles.scss 스타일을 정의하는 것입니다. 가장 먼저 해야 할 일은 파일을 가져오themes/index는 것입니다 - 이렇게 하면 Ignite UI for Angular Sass 프레임워크의 모든 강력한 도구에 접근할 수 있습니다:

@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​

$banner-theme: banner-theme(
  $banner-background: #e3e3e3,
  $banner-message-color: color($purple-palette, "secondary", 600)
);

여기서는 테마 라이브러리에서 노출된 색상을 생성하는 데 함께 사용하고my-banner-palette​igx-color 있습니다.

Include the theme

이제 우리가 해야 할 일은 주제를 Sass의@include 표현으로 적용하는 것뿐입니다. 우리는 새로 정의$banner-theme 한 값을 다음을 통해css-vars mixin 전달합니다:

@include css-vars($banner-theme);

Component styles

Row Editing 오버레이는 다른 많은 구성 요소의 테마를 사용하기 때문에 전역 스타일을 통해 스타일을 지정하면 애플리케이션의 다른 부분(예: 배너, 버튼 등)에 영향을 줄 수 있습니다. 이를 방지하는 가장 좋은 방법은 배너 테마의 범위를 배너 테마가 적용되는 특정 구성 요소의 스타일 파일로 지정하는 것입니다.

Note

만약 컴포넌트가 ViewEncapsulation을Emulated 사용한다면, 그리드의 Row Editing Overlay를 스타일링하기 위해 이 캡슐화::ng-deep를 통해 침투해야 합니다.

// custom.component.scss

:host {
  ::ng-deep {
    @include css-vars($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 css-vars($button-theme);
}

문장을 그리고 버튼에만 적용@include​.custom-buttons 되도록 범위Done 내Cancel로 설정합니다.

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 포럼
• ​GitHub Ignite UI for Angular