React 계층형 그리드 행 추가

계층 그리드의 Ignite UI for React 행 추가 기능은 사용자가 별도의 폼이나 페이지로 이동하지 않고도 새 데이터 레코드를 입력하고 제출할 수 React 있게 합니다. 이를 통해IgrHierarchicalGrid 사용자는 인라인 행 추가와 강력한 CRUD 작업을 위한 API를 통해 데이터를 조작할 수 있습니다. 그리드 템플릿에서 편집 동작이 활성화된 컴포넌트를IgrActionStrip 추가하세요. 그 다음 한 줄을 올리고 제공된 버튼을 사용하세요. 마지막으로 + + 버튼을 눌러 ALT UI를 추가하는 행을 생성합니다.

React Hierarchical Grid Row Adding Example

Row Adding Usage

그 다음 데이터 소스IgrHierarchicalGrid를 true로 설정하고 편집 동작이 활성화된 컴포넌트를rowEditable 정의IgrActionStrip 하세요. 입력은AddRow 행을 생성하는 버튼의 가시성을 제어합니다.

<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 연산의 맥락으로 사용할 행을 its(PK)로 지정해야 합니다.RowID이 메서드는 최종 사용자가 지정된 행의 행 추가 액션 스트립 버튼을 클릭한 것처럼 작동하며, 그 아래에 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 통해 자동으로 행 추가(add row) UI를 완전히 표시합니다.

• 행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

Behavior

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

새로운 행이 UI 추가를 통해 추가된 후, 그 위치와 가시성은 정렬, 필터링 및 그룹화 상태IgrHierarchicalGrid에 의해 결정됩니다. 이 상태들이 적용되지 않은 경우IgrHierarchicalGrid, 이 기록이 마지막 기록으로 나타납니다. 간식바가 잠시 표시되며, 사용자가 화면에 없을 때 스크롤할 수IgrHierarchicalGrid 있는 버튼이 있습니다.

Keyboard Navigation

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

• ESC는 변경 사항을 제출하지 않고 행 추가 모드를 종료합니다.

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

Feature Integration

• 행 추가는 데이터 뷰IgrHierarchicalGrid가 수정되면 중단됩니다. 최종 사용자가 변경한 모든 사항은 제출됩니다. 데이터 뷰를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지 않습니다.

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

• UIIgrHierarchicalGrid를 스폰할 때, 최종 사용자가 행 추가 버튼을 클릭한 행의 자식 레이아웃이 접혀 있습니다.

Customizing Row Adding Overlay

Customizing Text

행의 텍스트를 맞춤 설정하고 오버레이rowAddTextTemplate를 추가하는 것은 .

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

Styling

행 추가(row adding) UI는 편집 동작의IgrActionStrip 버튼, 편집 편집기 및 오버레이, 그리고 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이 구성 요소들을 스타일링하려면 해당 주제의 종합 가이드를 참고할 수 있습니다:

• 계층적 그리드 행 편집
• 스낵바

API References

• rowEditable
• RowEditEnter
• RowEdit
• RowEditDone
• RowEditCancel
• endEdit
• primaryKey
• IgrHierarchicalGrid

Additional Resources

• 계층적 그리드 편집

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

• Ignite UI for React Forums
• Ignite UI for React GitHub