React 계층형 그리드의 행 동작

React 계층적 그리드의 Ignite UI for React 행 동작 기능은 개발자가 CRUD를 사용하여IgrActionStrip 행/셀 구성 요소와 행 고정을 수행할 수 있게 합니다. 이 작업들을 위한 여러 사전 정의된 UI 컨트롤이 있으며, 편집 및 고정 시IgrHierarchicalGrid 특정 행에 적용할 수 있습니다.

Usage

사전 정의된 작업 UI 구성 요소는 다음과 같습니다.

IgrGridEditingActions- 편집을 위해IgrHierarchicalGrid 특별히 설계된 기능과 UI를 포함합니다. 셀이나 행의 편집 모드를 빠르게 토글할 수 있고, 행 삭제 여부rowEditable에 따라IgrHierarchicalGrid 달라집니다.
IgrGridPinningActions- 행 고정을 위해IgrHierarchicalGrid 특별히 설계된 기능과 UI를 포함합니다. 이 기능은 빠르게 줄 고정을 하고, 고정된 행과 비활성화된 행 사이를 탐색할 수 있게 해줍니다.

이들은 기본 상호작용을 제공하기 위해IgrHierarchicalGrid 모두 추가IgrActionStrip 됩니다.

<IgrHierarchicalGrid rowEditable={true} primaryKey="ID">
    <IgrColumn field="field">
    </IgrColumn>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>

[!Note] When ActionStripComponent is a child component of the IgrHierarchicalGrid, hovering a row will automatically show the UI.

Custom Implementation

이 컴포넌트들은 템플릿을 노출하여 맞춤화에 유연성을 제공합니다. 예를 들어, 만약 우리가 다음을 사용하고자 한다면IgrActionStrip 예를 들어 행 액션이 있는 Gmail 시나리오에 적합합니다. 삭제하다, 편집하다 등등. 아이콘이 있는 버튼 컴포넌트를 만들고 클릭 이벤트를 추가한 뒤IgrActionStrip.

<IgrHierarchicalGrid>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions editRow={true} deleteRow={true}></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>

API References

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