Angular 그리드 행 편집

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

    Angular Grid Row Editing Example

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

    Note

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

    Row Editing Usage

    시작하려면IgxGridModule 안에 app.module.ts 파일:

    // app.module.ts

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

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

    Then define a Grid with bound data source and rowEditable set to true:

    <igx-grid [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true">
    <igx-column field="ProductID" header="Product ID" editable="false"></igx-column>
    <igx-column field="ReorderLevel" header="ReorderLever" [dataType]="'number'"></igx-column>
    <igx-column field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
    <igx-column field="UnitsInStock" header="UnitsInStock" [dataType]="'number'">
        <ng-template igxCellEditor let-cell="cell">
            <input name="units" [(ngModel)]="cell.value" style="color: black" />
        </ng-template>
    </igx-column>
    <igx-column field="OrderDate" [dataType]="'date'"></igx-column>
    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'"></igx-column>
</igx-grid>
    Note

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

    Note

    It's not needed to enable editing for individual columns. Using the rowEditable property in the Grid, will mean that all rows, with defined field property, excluding primary one, will be editable. If you want to disable editing for specific column, then you set the editable column's input to false.

    import { Component, ViewChild } from '@angular/core';
import { data } from './data';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
// import { IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-grid-row-edit',
    styleUrls: [`grid-row-editing-sample.component.css`],
    templateUrl: 'grid-row-editing-sample.component.html'
})
export class GridRowEditSampleComponent {
    @ViewChild('gridRowEdit', { read: IgxGridComponent }) public gridRowEdit: IgxGridComponent;

    public data: any[];

    constructor() {
        this.data = data;
    }
}
    Note

    The Grid uses internally a provider IgxBaseTransactionService that holds pending cell changes, until row state submitted or cancelled.

    Positioning

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

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

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

    Behavior

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

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

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

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

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

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

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

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

    Keyboard Navigation

    • Enter and F2 enters row edit mode

    • Esc exits row edit mode and doesn't submit any of the cell changes, made while the row was in edit mode.

    • Tab move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row.

    Feature Integration

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

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

    • 그룹화된 행을 확장하거나 축소해도 현재 행의 편집이 종료되지 않습니다.

    Customizing Row Editing Overlay

    Customizing Text

    Customizing the text of the row editing overlay is possible using the igxRowEditTextDirective. The rowChangesCount property is exposed and it holds the count of the changed cells.

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

    스타일링

    Using the Ignite UI for Angular Theme Library, we can greatly alter the Row Editing overlay. The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: - igx-banner in order to render its contents - igx-buttons are rendered in the default template (for the Done and Cancel buttons).

    In the below example, we will make use of those two components' styling options, button styling & banner-styling, to customize the experience of our IgxGrid's Row Editing. We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in the Cell Styling section.

    Import theme

    The easiest way to style the Row Editing banner is to define styles in our app's global style file (typically styles.scss). The first thing we need to do is import the themes/index file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework:

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

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

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

    테마 정의

    We can now define a custom banner theme that will affect our Row Editing background and make use of one of the predefined palettes namely $purple-palette :

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

    Here we are using my-banner-palette in conjunction with igx-color (exposed by the theme library) for generating our colors.

    Include the theme

    All we have to do now is apply the theme with a Sass @include statement. We pass our newly defined $banner-theme through the css-vars mixin:

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

    Component styles

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

    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep in order to style the grid Row Editing Overlay.

    // custom.component.scss

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

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

    Custom Templates

    To further customize our Row Editing overlay, we can pass a custom template so we can style the Done and Cancel buttons separately:

    <!-- in component.html -->
<igx-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-grid>

    After we've defined our custom buttons, we can make use of the button-theme to style them. You can learn more about igx-button styling in the Button Styling documentation. We can create a custom theme for our Done and Cancel:

    // custom.component.scss
...

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

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

    We scope our @include statement in .custom-buttons so that it is only applied to the Doneand Cancel buttons.

    Demo

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

    Note

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

    Known Issues and Limitations

    • 그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:
      • 행 선택
      • 행 확장/축소
      • 행 편집
      • 행 고정

    API References

    Additional Resources

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