Angular 그리드 셀 편집

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

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

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

    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 지침을 활용할 수 있습니다. 이를 위해서는 지시문으로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 감방/행의 구역입니다.

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

    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

    그리드 컴포넌트는 제공된 데이터를 데이터 소스에 추가하는 메서드를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 Theme Library이 그리드는grid-theme 다양한 특성을 드러내어 사용자가 그리드의 다양한 측면을 스타일링할 수 있게 합니다.

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

    을 사용하려면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

    이제 팔레트를 사용해 주제를 정의할 수 있습니다. 셀들은 thegrid-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);

    Demo

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

    Note

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

    API References

    Additional Resources