Web Components 그리드 셀 편집

Web Components Grid의 Ignite UI for Web Components Cell Editing은 Web Components Grid 구성 요소 내의 개별 셀의 내용에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱에서 기본적인 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있습니다. 기본적으로 Ignite UI for Web Components의 Grid는 셀 편집에 사용됩니다. 그리고 기본 셀 편집 템플릿으로 인해 Top of Form의 열 데이터 유형에 따라 다른 편집기가 있습니다.

또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.

Web Components Grid Cell Editing and Edit Templates Example

셀 편집

Editing through UI

다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.

• 두 번 클릭하면;
• 한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
• 키 누름 ENTER 시;
• 키를 누르면 F2;

다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.

• 키를 누를 때 Escape;
• ​정렬, 필터링, 검색 및 숨기기 작업을 수행할 때;

다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.

• 키 누름 ENTER 시;
• 키를 누르면 F2;
• 키 누름 TAB 시;
• on single click to another cell - when you click on another cell in the IgcGridComponent, your changes will be submitted.
• 페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.

[!Note] The cell remains in edit mode when you scroll vertically or horizontally or click outside the IgcGridComponent. This is valid for both cell editing and row editing.

Editing through API

You can also modify the cell value through the IgcGridComponent API but only if primary key is defined:

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

Another way to update cell is directly through Update method of Cell:

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

​일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.

셀에 적용될 사용자 정의 템플릿을 제공하려는 경우 해당 템플릿을 셀 자체나 헤더에 전달할 수 있습니다. 먼저 평소와 같이 열을 만듭니다.

<igc-column
    field="Race"
    data-type="string"
    editable="true"
    id="column1">
</igc-column>

index.ts 파일의 이 열에 템플릿을 전달합니다.

constructor() {
    var grid1 = document.getElementById('grid1') as IgcGridComponent;
    var column1 = document.getElementById('column1') as IgcColumnComponent;
    var column2 = document.getElementById('column2') as IgcColumnComponent;
    var column3 = document.getElementById('column3') as IgcColumnComponent;

    grid1.data = this.webGridCellEditSampleRoleplay;
    column1.inlineEditorTemplate = this.webGridCellEditCellTemplate;
    column2.inlineEditorTemplate = this.webGridCellEditCellTemplate;
    column3.inlineEditorTemplate = this.webGridCellEditCellTemplate;
}


public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
    let cellValues: any = [];
    let uniqueValues: any = [];
    for(const i of (this.webGridCellEditSampleRoleplay as any)){
        const field: string = ctx.cell.column.field;
        if(uniqueValues.indexOf(i[field]) === -1 )
        {
            cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
            uniqueValues.push(i[field]);
        }
    }
    return html`
        <igc-select style="width:100%; height:100%" size="large" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>
            ${cellValues}
        </igc-select>
    `;
}

추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.

Grid Excel Style Editing

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

Implementing this custom functionality can be done by utilizing the events of the IgcGridComponent. First we hook up to the grid's keydown events, and from there we can implement two functionalities:

• 상수 편집 모드

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 && !grid.crudService.cellInEditMode) {
            grid.crudService.enterEditMode(cell);
            cell.editValue = event.key;
        }
    }
}

• ENTER / SHIFT + ENTER 탐색

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

    // to find the next eligible 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));

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

Web Components 그리드 Excel 스타일 편집 샘플

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

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

CRUD operations

[!Note] Please keep in mind that when you perform some CRUD operation all of the applied pipes like filtering, sorting and grouping will be re-applied and your view will be automatically updated.

The IgcGridComponent provides a straightforward API for basic CRUD operations.

Adding a new record

The IgcGridComponent component exposes the addRow method which will add the provided data to the data source itself.

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

Updating data in the Grid is achieved through updateRow and updateCell methods but only if the PrimaryKey for the grid is defined. You can also directly update a cell and/or a row value through their respective update methods.

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

Please keep in mind that deleteRow method will remove the specified row only if a primaryKey is defined.

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

Cell Validation on Edit Event

Using the IgcGridComponent's editing events, we can alter how the user interacts with the IgcGridComponent.

In this example, we'll validate a cell based on the data entered in it by binding to the CellEdit event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event.

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

constructor() {
    var grid = document.getElementById('grid') as IgcGridComponent;
    this.webGridCellEdit = this.webGridCellEdit.bind(this);
    grid.addEventListener("cellEdit", this.webGridCellEdit);
}

The CellEdit emits whenever any cell's value is about to be committed. In our CellEdit definition, we need to make sure that we check for our specific column before taking any action:

public webGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
    const column = event.detail.column;
    if (column.field === 'UnitsOnOrder') {
            const rowData = event.detail.rowData;
            if (!rowData) {
                return;
            }
            if (event.detail.newValue > rowData.UnitsInStock) {
                event.cancel = true;
                alert("You cannot order more than the units in stock!");
            }
    }
}

​주문 단위 열 아래의 셀에 입력된 값이 사용 가능한 금액(재고 단위 아래의 값)보다 큰 경우 편집이 취소되고 사용자에게 취소 알림이 표시됩니다.

The result of the above validation being applied to our IgcGridComponent can be seen in the below demo:

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<igc-grid class="grid"></igc-grid>

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-edit-mode-color: orange;
    --ig-grid-cell-editing-background: lightblue;
}

Styling Example

API References

• IgcGridComponent

• IgcDatePickerComponent

Additional Resources

• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 고정
• 열 크기 조정
• 선택
• 수색