Grid cell editing and edit templates

Ignite UI for Angular Grid component provides a great data manipulation capabilities and powerful API for Angular CRUD operations. By default the Grid is using in cell editing and different editors will be shown based on the data type of the column, thanks to the default cell editing template. In addition you can define your own custom templates for update data actions and to override the default behavior for committing and discarding any changes.

데모


특정 셀에서 편집 모드에 들어가려면 먼저 열을 editable로 설정해야 합니다. 데이터 유형별 편집 템플릿을 사용하려면 열 dataType 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴 보겠습니다.

  • string 데이터 형식의 경우 기본 템플릿은 igxInput을 사용합니다
  • number 데이터 유형의 경우 기본 템플릿은 igxInput type="number"를 사용하며, 숫자로 분석할 수 없는 값으로 셀을 업데이트한 경우에는 변경이 취소되고 셀 값은 0으로 설정됩니다.
  • date 데이터 형식의 경우 기본 템플릿은 igx-date-picker를 사용합니다
  • boolean 데이터 형식의 경우 기본 템플릿은 igx-checkbox를 사용합니다

편집 가능한 셀이 다음 중 하나의 방법으로 포커스되어 있는 경우, 특정 셀에서 편집 모드로 들어갈 수 있습니다:

  • 더블 클릭;
  • 원클릭 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 원클릭으로 편집 모드에 들어갑니다. 이전에 선택한 셀이 편집 모드에 있지 않은 경우, 원클릭을 하면 편집 모드에 들어가지 않고 셀이 선택됩니다.
  • Enter 키를 누름;
  • F2 키를 누름;

다음 방법 중 하나를 사용하여 변경을 확정하지 않고 편집 모드를 종료할 수 있습니다:

  • Escape 키를 누름;
  • 정렬, 필터링, 검색, 숨기기 조작을 실행할 때;

다음 방법 중 하나를 사용하여 편집 모드를 종료하고 변경을 확정할 수 있습니다:

  • Enter 키를 누름;
  • F2 키를 누름;
  • Tab 키를 누름;
  • 다른 셀을 원클릭 - Grid의 다른 셀을 클릭하면 변경이 제출됩니다.
  • 페이징, 크기 조정, 핀 고정 또는 이동 등의 조작은 편집 모드를 종료하고 변경 사항이 확정됩니다.
Note

셀은 수직 또는 수평으로 스크롤하거나 Grid 이외를 클릭해도 편집 모드로 유지됩니다. 이것은 셀 편집과 행 편집 모두에 유효합니다.

기본 키가 정의되어 있는 경우에만 IgxGrid API를 통해 셀 값을 수정할 수도 있습니다.

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

업데이트하려는 셀이 Grid의 표시 컨테이너 외부에 있는 경우 새로운 값이 제출되지 않습니다.

셀을 업데이트하는 또 다른 방법은 IgxGridCellComponentupdate 메소드를 직접 호출하는 것입니다:

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

셀이 편집 모드일 때 적용될 사용자 템플릿을 정의하는 방법에 대해서는 그리드 열 구성에 대한 문서를 참조하십시오.

CRUD 조작

Note

CRUD 조작을 실행할 경우에는 필터링, 정렬, 그룹화 등 적용된 모든 파이프는 다시 적용되고 표시가 자동으로 업데이트된다는 점에 유의하십시오.

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

새로운 레코드 추가

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

Grid에 데이터를 업데이트

Grid에 데이터를 업데이트하는 것은 updateRowupdateCell 메소드를 통해 이루어지며 그리드의 기본 키가 정의되어 있는 경우에만 실행됩니다. 또한, 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);

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>

API 참조

추가 리소스