Angular 그리드 셀 편집

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

Angular 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

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

public updateCell() {
    this.grid1.updateCell(newValue, rowID, 'ReorderLevel');
}

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

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

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

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

Grid Excel Style Editing

Excel 스타일 편집을 사용하면 사용자는 Excel을 사용하는 것처럼 셀을 탐색하고 신속하게 편집할 수 있습니다.

이 사용자 정의 기능을 구현하려면 그리드의 이벤트를 활용하면 됩니다. 먼저 그리드의 keydown 이벤트에 연결하고 거기에서 두 가지 기능을 구현할 수 있습니다.

상수 편집 모드

public keydownHandler(event) {
  const key = event.keyCode;
  const grid = this.grid;
  const activeElem = grid.navigation.activeNode;

  if(
    (key >= 48 && key <= 57) ||
    (key >= 65 && key <= 90) ||
    (key >= 97 && key <= 122)){
        // Number or Alphabet upper case or Alphabet lower case
        const columnName = grid.getColumnByVisibleIndex(activeElem.column).field;
        const cell = grid.getCellByColumn(activeElem.row, columnName);
        if (cell && !cell.editMode) {
            cell.editMode = true;
            cell.editValue = event.key;
            this.shouldAppendValue = true;
        } else if (cell && cell.editMode && this.shouldAppendValue) {
            event.preventDefault();
            cell.editValue = cell.editValue + event.key;
            this.shouldAppendValue = false;
        }
    }
}

Enter / Shift+Enter 탐색

if (key == 13) {
    let thisRow = activeElem.row;
    const column = activeElem.column;
    const rowInfo = grid.dataView;

    // to find the next eiligible cell, we will use a custom method that will check the next suitable index
    let nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey);

    // and then we will navigate to it using the grid's built in method navigateTo
    this.grid.navigateTo(nextRow, column, (obj) => {
        obj.target.activate();
        this.grid.clearCellSelection();
        this.cdr.detectChanges();
    });
}

다음 적격 지수를 찾는 주요 부분은 다음과 같습니다.

//first we check if the currently selected cell is the first or the last
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
return currentRowIndex;
}
// in case using shift + enter combination, we look for the first suitable cell going up the field
if(previous){
return  dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
}
// or for the next one down the field
return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));

자세한 내용은 전체 샘플을 확인하세요.

Angular Grid Excel Style Editing Sample

위 접근 방식의 주요 이점은 다음과 같습니다.

지속적인 편집 모드: 셀이 선택된 동안 입력하면 입력된 값으로 즉시 편집 모드로 들어가 기존 값을 대체합니다.
Enter / Shift+Enter 사용하여 탐색할 때 데이터가 아닌 행은 건너뜁니다. 이를 통해 사용자는 해당 값을 빠르게 순환할 수 있습니다.

CRUD operations

Note

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

IgxGridComponent는 기본 CRUD 작업을 위한 간단한 API를 제공합니다.

Adding a new record

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

// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);

Updating data in the Grid

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

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

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

Deleting data from the Grid

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

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

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

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

Cell validation on edit event

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

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

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

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

export class MyGridEventsComponent {
    public handleCellEdit(event: IGridEditEventArgs): void {
        const column = event.column;
        if (column.field === 'Ordered') {
            const rowData = event.rowData;
            if (!rowData) {
                return;
            }
            if (event.newValue > rowData.UnitsInStock) {
                event.cancel = true;
                this.toast.open();
            }
        }
    }
}

주문 열 아래 셀에 입력한 값이 사용 가능한 금액(재고 단위 아래 값)보다 큰 경우 편집이 취소되고 오류 메시지와 함께 토스트가 표시됩니다.

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

스타일링

IgxGrid를 사용하면 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로 스타일이 지정되므로 이를 사용하여 IgxGrid에 대한 테마를 생성할 수 있습니다.

$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 그리드 셀 편집

Angular Grid cell editing and edit templates Example

Note

셀 편집

Editing through UI

Note

Editing through API

Cell Editing Templates

Note

Note

Note

Grid Excel Style Editing

Angular Grid Excel Style Editing Sample

CRUD operations

Note

Adding a new record

Updating data in the Grid

Deleting data from the Grid

Cell validation on edit event

스타일링

Importing style library

Defining a palette

Defining themes

Applying the theme

Scoped component theme

Note

Note

Styling Demo

Note

API References

Additional Resources

테마