React Grid Row Editing

The Ignite UI for React Row Editing feature in React Grid allows editing data directly within the IgrGrid. On top of this convenient way to manipulate data, there’s a powerful API for full CRUD operations. You can perform grid row editing by clicking on a row and pressing Enter key. Another quick way is to double click with the mouse on the row that needs to be modified.

React Grid Row Editing Example

The following sample demonstrates how to enable row editing in the IgrGrid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the Done button, or discarded by using Cancel button.

[!Note] When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode.

Row Editing Usage

Define a IgrGrid with bound data source and rowEditable set to true:

const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => {
    return (
        <>
            <input name="units" value={ctx.cell.value} style={{color: "black"}} />;
        </>
    );
}

<IgrGrid primaryKey="ProductID" width="100%" height="500px" rowEditable={true}>
    <IgrColumn field="ProductID" header="Product ID" editable={false}></IgrColumn>
    <IgrColumn field="ReorderLevel" header="ReorderLever" dataType="number"></IgrColumn>
    <IgrColumn field="ProductName" header="ProductName" dataType="string"></IgrColumn>
    <IgrColumn field="UnitsInStock" header="UnitsInStock" dataType="number" bodyTemplate={unitsInStockCellTemplate}></IgrColumn>
    <IgrColumn field="OrderDate" dataType="date"></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>
</IgrGrid>

[!Note] Setting primary key is mandatory for row editing operations.

[!Note] Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgrGrid, all rows, with defined field property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the editable input of that column to false.

[!Note] The IgrGrid utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

Positioning

오버레이의 기본 위치는 편집 모드에 있는 행 아래에 있습니다.
행 아래에 공간이 없으면 행 위에 오버레이가 나타납니다.
상단 또는 하단에 표시된 오버레이는 오버레이가 닫힐 때까지 스크롤하는 동안 이 위치를 유지합니다.

Behavior

행이 편집 모드인 경우 동일한 행의 셀을 클릭하면 편집이 계속됩니다.
"완료" 버튼을 클릭하면 행 편집이 완료되고 데이터 소스 또는 가능한 경우 트랜잭션에 변경 사항이 제출됩니다. 또한 행은 편집 모드를 종료합니다.
"취소" 버튼을 클릭하면 행의 현재 변경 사항이 모두 되돌려지고 행은 편집 모드를 종료합니다.
행이 편집 모드인 경우 다른 행의 셀을 클릭하면 현재 행 편집이 완료되고 새 행 변경 사항이 제출됩니다("완료" 버튼을 클릭하는 것과 동일한 동작). 포커스를 받은 새 셀이 편집 가능하면 새 행도 편집 모드로 들어가고, 셀을 편집할 수 없으면 이전 행만 편집 모드에서 나갑니다.
If row is in edit mode and IgrGrid is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When IgrGrid is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the IgrGrid, the cell will also stay in edit mode.
정렬, 필터링, 검색 및 숨기기 작업을 수행하면 행의 모든 현재 변경 사항이 되돌려지고 행은 편집 모드를 종료합니다.
페이징, 크기 조정, 고정 및 이동 작업을 수행하면 편집 모드가 종료되고 최신 값이 제출됩니다.
Each modified cell gets edited style until row edit is finished. This is the behavior, when IgrGrid is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed.

ENTER 행 F2 편집 모드로 들어갑니다.
ESC 행 편집 모드를 종료하고 행이 편집 모드에 있는 동안 수행된 셀 변경 사항을 제출하지 않습니다.
Tab 키를 누르면 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

Feature Integration

모든 데이터 변경 작업은 행 편집 작업을 종료하고 현재 행 변경 사항을 제출합니다. 여기에는 정렬, 그룹화 및 필터링 기준 변경, 페이징 등과 같은 작업이 포함됩니다.
행 편집이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 기능에도 동일하게 적용됩니다.

그룹화된 행을 확장하거나 축소해도 현재 행의 편집이 종료되지 않습니다.

Customizing Row Editing Overlay

Customizing Text

템플릿을 사용하여 행 편집 오버레이의 텍스트를 사용자 정의할 수 있습니다.

The RowChangesCount property is exposed and it holds the count of the changed cells.

const rowEditTextTemplate = (ctx: IgrGridRowEditTextTemplateContext) =>{
    return (
        <>
            Changes: {ctx.implicit}
        </>
    );
}

Customizing Buttons

템플릿을 통해 행 편집 오버레이의 버튼을 사용자 정의할 수도 있습니다.

const rowEditActionsTemplate =(ctx: IgrGridRowEditActionsTemplateContext) => {
    const endRowEdit = ctx.implicit;
    return (
        <>
            <button onClick={(event) => endRowEdit(false, event)}>Cancel</button>
            <button onClick={(event) => endRowEdit(true, event)}>Apply</button>
        </>
    );
}

Styling

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

<IgrGrid className="grid"></IgrGrid>

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

.grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}

Demo

Known Issues and Limitations

When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

행 선택
행 확장/축소
행 편집
행 고정

API References

rowEditable
RowEditEnter
RowEdit
RowEditDone
endEdit
field
editable
primaryKey
IgrGrid

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

React Grid Row Editing