React 계층형 그리드 행 추가

React Hierarchical Grid의 Ignite UI for React 사용하면 사용자는 별도의 양식이나 페이지로 이동하지 않고도 새 데이터 레코드를 입력하고 제출할 수 있습니다. IgrHierarchicalGrid를 사용하면 사용자는 인라인 행 추가와 CRUD 작업을 위한 강력한 API를 통해 데이터를 조작할 수 있습니다. 그리드 템플릿에서 편집 작업이 활성화된 IgrActionStrip 구성 요소를 추가합니다. 그런 다음 행을 마우스오버하고 제공된 버튼을 사용합니다. 마지막으로 ALT + +를 눌러 행 추가 UI를 생성합니다.

React Hierarchical Grid Row Adding Example

Row Adding Usage

그런 다음 바인딩된 데이터 소스를 정의하고 rowEditable IgrActionStrip true로 설정하고 편집 작업이 활성화된 구성 요소를 정의합니다 IgrHierarchicalGrid. 입력은 AddRow 행을 추가하는 UI를 생성하는 버튼의 가시성을 제어합니다.

<IgrHierarchicalGrid autoGenerate={false} data={singersData} id="hGrid" primaryKey="ID" rowEditable={true} ref={hierarchicalGrid1Ref}>
   <IgrActionStrip>
     <IgrGridEditingActions
        addRow={true}>
       </IgrGridEditingActions>
   </IgrActionStrip>
   <IgrColumn field="Artist" header="Artist" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="Debut" header="Debut" dataType="number" minWidth="88px" maxWidth="230px" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
       <IgrColumn field="Album" header="Album" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="LaunchDate" header="Launch Date" dataType="date" resizable={true}>
       </IgrColumn>
       <IgrColumn field="BillboardReview" header="Billboard Review" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>
           <IgrColumn field="Number" header="No." dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Title" header="Title" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Released" header="Released" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Genre" header="Genre" dataType="string" resizable={true}>
           </IgrColumn>
       </IgrRowIsland>
   </IgrRowIsland>
   <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>                  
       <IgrColumn field="Tour" header="Tour" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="StartedOn" header="Started on" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Location" header="Location" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Headliner" header="Headliner" dataType="string" resizable={true}>
       </IgrColumn>
   </IgrRowIsland>
</IgrHierarchicalGrid>

참고: 행 추가 작업에는 기본 키 설정이 필수입니다.

참고: 기본 키를 제외한 모든 열은 기본적으로 UI를 추가하는 행에서 편집 가능합니다. 특정 열에 대한 편집을 비활성화하려면 editable 열의 입력을 false로 설정해야 합니다.

참고: 행 추가 버튼의 가시성을 제어하는 IgrGridEditingActions 입력은 버튼이 표시하는 레코드를 미세 조정하기 위해 IgrRowType 유형인 작업 스트립 컨텍스트를 사용할 수 있습니다.

내부 BaseTransactionService는 자동으로 제공됩니다 IgrHierarchicalGrid. 행 상태가 제출되거나 취소될 때까지 보류 중인 셀 변경 내용을 보관합니다.

Start Row Adding Programmatically

IgrHierarchicalGrid 두 개의 서로 다른 공용 메서드를 사용하여 Add Row UI를 프로그래밍 방식으로 생성할 수 있습니다. 하나는 UI가 생성되어야 하는 행을 지정하기 위해 행 ID를 허용하는 것이고 다른 하나는 인덱스로 작동하는 것입니다. 이러한 메서드를 사용하여 현재 데이터 뷰 내의 아무 곳에나 UI를 생성할 수 있습니다. 페이지를 변경하거나 예를 들어 필터링된 행을 지정하는 것은 지원되지 않습니다.

beginAddRowById 사용하려면 해당 RowID (PK)를 통해 작업의 컨텍스트로 사용할 행을 지정해야 합니다. 그런 다음 메서드는 최종 사용자가 지정된 행에 대한 행 추가 작업 스트립 버튼을 클릭한 것처럼 작동하여 그 아래에 UI를 생성합니다. 첫 번째 매개변수에 null 전달하여 UI가 그리드의 첫 번째 행으로 생성되도록 할 수도 있습니다.

gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record

이 메서드는 BeginAddRowByIndex 비슷하게 작동하지만 UI가 생성되어야 하는 인덱스를 지정해야 합니다. 허용되는 값의 범위는 0에서 데이터 뷰의 크기(1) 사이입니다.

gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record

Positioning

행 추가 UI의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.
스크롤하면 IgrHierarchicalGrid 행 추가 UI가 자동으로 완전히 표시됩니다.
행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

Behavior

행 추가 UI는 최종 사용자에게 일관된 편집 환경을 제공하도록 설계되었으므로 행 편집 UI와 동작이 동일합니다. 자세한 내용은 계층적 그리드 행 편집 항목을 참조하세요.

행 추가 UI를 통해 새 행이 추가되면 해당 위치 및/또는 가시성은 의 정렬, 필터링 및 그룹화 상태에 IgrHierarchicalGrid 따라 결정됩니다. 이러한 상태가 적용되지 않은 a IgrHierarchicalGrid 에서는 마지막 레코드로 표시됩니다. 스낵바가 간략하게 표시되며, 최종 사용자가 보이지 않는 경우 해당 위치로 스크롤 IgrHierarchicalGrid 하는 데 사용할 수 있는 버튼이 포함되어 있습니다.

ALT + +- 행 추가를 위한 편집 모드로 들어갑니다.

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

Feature Integration

의 데이터 뷰 IgrHierarchicalGrid가 수정되면 모든 행 추가 작업이 중지됩니다. 최종 사용자가 변경한 모든 내용이 제출됩니다. 데이터 보기를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지는 않습니다.
행 추가 작업이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 데이터 보기 종속 기능에도 동일하게 적용됩니다.

에 대한 IgrHierarchicalGrid UI를 생성할 때 최종 사용자가 행 추가 버튼을 클릭하는 행에 대해 현재 확장된 모든 하위 레이아웃이 축소됩니다.

Customizing Row Adding Overlay

Customizing Text

오버레이를 추가하는 행의 텍스트를 사용자 정의할 수 있습니다. rowAddTextTemplate

gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return (
        <>
            <span>Adding Row</span>
        </>
    );
}

Styling

행 추가 UI는 IgrActionStrip 편집 작업의 버튼, 편집 편집기 및 오버레이, 최종 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이러한 구성 요소의 스타일을 지정하려면 해당 항목의 포괄적인 가이드를 참조할 수 있습니다.

API References

rowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
endEdit
primaryKey
IgrHierarchicalGrid

Additional Resources

계층적 그리드 편집

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