React 계층형 그리드 행 편집

    React Hierarchical Grid의 Ignite UI for React 하면 IgrHierarchicalGrid 내에서 직접 데이터를 편집할 수 있습니다. 데이터를 조작하는 이 편리한 방법 외에도 전체 CRUD 작업을 위한 강력한 API가 있습니다. 행을 클릭하고 Enter 키를 눌러 그리드 행 편집을 수행할 수 있습니다. 또 다른 빠른 방법은 수정해야 하는 행을 마우스로 두 번 클릭하는 것입니다.

    React Hierarchical Grid Row Editing Example

    다음 샘플에서는 행 편집 IgrHierarchicalGrid을 활성화하는 방법을 보여 줍니다. 셀 값을 변경한 다음 같은 행의 다른 셀을 클릭하거나 이동하면 완료 단추를 사용하여 확인하거나 취소 단추를 사용하여 삭제할 때까지 행 값이 업데이트되지 않습니다.

    EXAMPLE
    TSX
    CSS
    Edit in:

    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

    바운드 데이터 소스를 정의 IgrHierarchicalGrid 하고 rowEditable true로 설정합니다.

    <IgrHierarchicalGrid autoGenerate={false} data={singersData} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" rowEditable={true}>
    <IgrColumn field="Artist" header="Artist" dataType="string" />
    <IgrColumn field="Photo" header="Photo" dataType="image" editable={false} />
    <IgrColumn field="Debut" header="Debut" dataType="number" />
    <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="number" />
    <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="number" />

    <IgrRowIsland childDataKey="Albums" autoGenerate={false} primaryKey="Album" rowEditable={true}>
        <IgrColumn field="Album" header="Album" dataType="string" />
        <IgrColumn field="LaunchDate" header="Launch Date" dataType="date" />
        <IgrColumn field="BillboardReview" header="Billboard Review" dataType="string" />
        <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="string" />

        <IgrRowIsland childDataKey="Songs" autoGenerate={false} primaryKey="Number" rowEditable={true}>
            <IgrColumn field="Number" header="No." dataType="string" />
            <IgrColumn field="Title" header="Title" dataType="string" />
            <IgrColumn field="Released" header="Released" dataType="date" />
            <IgrColumn field="Genre" header="Genre" dataType="string" />
        </IgrRowIsland>
    </IgrRowIsland>

    <IgrRowIsland childDataKey="Tours" autoGenerate={false} primaryKey="Tour" rowEditable={true}>
        <IgrColumn field="Tour" header="Tour" dataType="string" />
        <IgrColumn field="StartedOn" header="Started on" dataType="string" />
        <IgrColumn field="Location" header="Location" dataType="string" />
        <IgrColumn field="Headliner" header="Headliner" dataType="string" />
    </IgrRowIsland>
</IgrHierarchicalGrid>

tsx

    Setting primary key is mandatory for row editing operations.

    Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgrHierarchicalGrid, 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.

    The IgrHierarchicalGrid utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

    Positioning

    • 오버레이의 기본 위치는 편집 모드에 있는 행 아래에 있습니다.

    • 행 아래에 공간이 없으면 행 위에 오버레이가 나타납니다.

    • 상단 또는 하단에 표시된 오버레이는 오버레이가 닫힐 때까지 스크롤하는 동안 이 위치를 유지합니다.

    Behavior

    • 행이 편집 모드인 경우 동일한 행의 셀을 클릭하면 편집이 계속됩니다.

    • "완료" 버튼을 클릭하면 행 편집이 완료되고 데이터 소스 또는 가능한 경우 트랜잭션에 변경 사항이 제출됩니다. 또한 행은 편집 모드를 종료합니다.

    • "취소" 버튼을 클릭하면 행의 현재 변경 사항이 모두 되돌려지고 행은 편집 모드를 종료합니다.

    • 행이 편집 모드인 경우 다른 행의 셀을 클릭하면 현재 행 편집이 완료되고 새 행 변경 사항이 제출됩니다("완료" 버튼을 클릭하는 것과 동일한 동작). 포커스를 받은 새 셀이 편집 가능하면 새 행도 편집 모드로 들어가고, 셀을 편집할 수 없으면 이전 행만 편집 모드에서 나갑니다.

    • 행이 편집 모드에 있고 IgrHierarchicalGrid 행이 가시 영역 밖으로 나가도록 스크롤하면 후자는 여전히 편집 모드에 있습니다. IgrHierarchicalGrid 행이 다시 표시되도록 스크롤하면 행은 여전히 편집 모드에 있습니다. 바깥쪽 IgrHierarchicalGrid을 클릭하면 셀도 편집 모드로 유지됩니다.

    • ​정렬, 필터링, 검색 및 숨기기 작업을 수행하면 행의 모든 현재 변경 사항이 되돌려지고 행은 편집 모드를 종료합니다.

    • ​페이징, 크기 조정, 고정 및 이동 작업을 수행하면 편집 모드가 종료되고 최신 값이 제출됩니다.

    • 수정된 각 셀은 행 편집이 완료될 때까지 스타일이 편집됩니다. 이것은 트랜잭션과 함께 제공되지 않을 때 IgrHierarchicalGrid의 동작입니다. 트랜잭션을 사용할 수 있는 경우 모든 변경 사항이 커밋될 때까지 셀 편집 스타일이 적용됩니다.

    Keyboard Navigation

    • Enter를 누르고 F2를 누르면 행 편집 모드로 들어갑니다.

    • Esc는 행 편집 모드를 종료하고 행이 편집 모드에 있는 동안 수행된 셀 변경 사항을 제출하지 않습니다.

    • Tab을 사용 하여 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

    Feature Integration

    • 모든 데이터 변경 작업은 행 편집 작업을 종료하고 현재 행 변경 사항을 제출합니다. 여기에는 정렬, 그룹화 및 필터링 기준 변경, 페이징 등과 같은 작업이 포함됩니다.

    • 행 편집이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 기능에도 동일하게 적용됩니다.

    Customizing Row Editing Overlay

    Customizing Text

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

    ​RowChangesCount 속성이 노출되고 변경된 셀 수를 보유합니다.

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

    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>
        </>
    );
}
tsx

    Styling

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

    <IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>
tsx

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

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

    Demo

    EXAMPLE
    TSX
    CSS
    Edit in:

    Known Issues and Limitations

    • 그리드에 primaryKey 설정되지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃습니다. 요청이 완료되었습니다:
    • 행 선택
    • 행 확장/축소
    • 행 편집
    • 행 고정

    API References

    Additional Resources

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