React Grid 편집

    The Ignite UI for React Cell Editing feature in React Grid provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The IgrGrid provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:

    Setup

    In order to specify which edit mode should be enabled, the IgrGrid exposes the following boolean properties - editable and rowEditable.

    The editable property enables you to specify the following options:

    • false- 해당 열의 편집이 비활성화됩니다. 이것이 기본값입니다.
    • true- 해당 열에 대한 편집이 활성화됩니다.

    Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the IgrGrid.

    The rowEditable property enables you to specify the following options:

    • false- 해당 그리드의 행 편집이 비활성화됩니다. 이것이 기본값입니다.
    • true- 해당 그리드의 행 편집이 활성화됩니다.

    In the IgrGrid, if you set rowEditable property to true, and the editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the primary key.

    • 셀 및 일괄 편집- 이 시나리오에서는 각 셀의 모든 단일 수정 사항이 별도로 보존되며 실행 취소/다시 실행 작업이 셀 수준에서 가능합니다.
    • 행 및 일괄 편집- 이 시나리오에서는 수정 사항이 행 수준에서 유지되므로 실행 취소/다시 실행 작업은 수정된 각 셀에 대해 작동하지 않고 각 행의 여러 셀에 대해 작동합니다.

    Editing Templates

    If you want to use a data type specific edit templates, you should specify the column's dataType property. So let's now see what are the default templates for each type:

    • For string data type, default template is using IgrInput.
    • For number data type, default template is using IgrInput type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0.
    • For date data type, default template is using IgrDatePicker
    • For dateTime data type, default template is using DateTimeEditor. This editor will give you a mask directions for the input elements part of the DateTime object.
    • For time - data type, default template is using TimePicker.
    • For boolean data type, default template is using IgrCheckbox.
    • For currency data type, default template is using InputGroup with prefix/suffix configuration based on application or grid locale settings.
    • For percent data type, default template is using InputGroup with suffix element that shows a preview of the edited value in percents.

    사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.

    Event Arguments and Sequence

    그리드는 편집 경험을 더 효과적으로 제어할 수 있는 다양한 이벤트를 표시합니다. 이러한 이벤트는 행 편집 및 셀 편집 수명 주기 동안(편집 작업을 시작, 커밋 또는 취소할 때) 발생합니다.

    이벤트 설명 인수 취소 가능
    RowEditEnter 만약에RowEditing 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다. IgrGridEditEventArgs 진실
    CellEditEnter 셀이 편집 모드로 들어갈 때 발생합니다(이후RowEditEnter) IgrGridEditEventArgs 진실
    CellEdit 값이 변경되면 셀의 값이 커밋 되기 직전에 실행됩니다(예: 를 누르기 ENTER). IgrGridEditEventArgs 진실
    CellEditDone 값이 변경되면 셀이 편집되고 셀 값이 커밋 된 후에 실행됩니다. IgrGridEditDoneEventArgs 거짓
    CellEditExit 셀이 편집 모드를 종료할 때 발생합니다. IgrGridEditDoneEventArgs 거짓
    RowEdit 만약에RowEditing 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:Done 행 편집 오버레이의 버튼) IgrGridEditEventArgs 진실
    RowEditDone 만약에RowEditing 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에​ ​실행 됩니다. IgrGridEditDoneEventArgs 거짓
    RowEditExit 만약에RowEditing 활성화되면 행이 편집 모드를 종료할 때 실행됩니다. IgrGridEditDoneEventArgs 거짓

    Event Cancelation

    • RowEditEnter - Neither Row nor Cell will enter edit mode.
    • CellEditEnter - Prevents entering cell edit. If rowEditable is enabled, row edit will be triggered, although cell edit will remain forbidden.
    • CellEdit - Allowed Cell and/or Row edit, hitting Done button or Enter won't commit the value or row transaction. Cell editing and Row editing won't be closed until Cancel button is clicked.
    • RowEdit - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting Done does not commit or close the row. Cancel button closes the editing process and the transaction without committing the changes.

    다음 샘플은 실제 편집 실행 순서를 보여줍니다.

    Features integration

    셀/행이 편집 모드에 있는 동안 사용자는 다양한 방법으로 그리드와 상호 작용할 수 있습니다. 다음 표에서는 특정 상호 작용이 현재 편집에 어떤 영향을 미치는지 지정합니다.

    그리드 필터링 정렬 페이징 움직이는 고정 숨김 그룹화 기준 크기 조정 탈출하다 입력하다 F2 탭 셀 클릭 새 행 추가/삭제/수정
    편집 모드 유지 ✔
    편집 모드 종료 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
    저지르다 ✔ ✔ ✔ ✔ ✔
    버리다 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

    표에서 볼 수 있듯이 열 크기 조정을 제외한 모든 상호 작용은 편집을 종료하고 새 값을 삭제합니다. 새 값이 커밋되어야 하는 경우 개발자는 해당 기능 "-ing" 이벤트에서 이를 수행할 수 있습니다.

    셀/행이 편집 모드에 있는 동안 사용자가 열을 정렬하려고 시도하는 경우 새 값을 커밋하는 방법의 예:

    function onSorting(args: IgrSortingEventArgs) {
    const grid = args.target as IgrGrid;
    grid.endEdit(true);
}

<IgrGrid data={localData} primaryKey="ProductID" onSorting={onSorting}>
</IgrGrid>

    API References

    Additional Resources