React Grid의 행 작업

    React Grid의 Ignite UI for React 행 작업 기능을 통해 개발자는 행/셀 구성 요소 및 행 고정에 CRUD를 IgrActionStrip 사용하고 활용할 수 있습니다. 이러한 작업에 대해 편집 및 고정의 특정 행 IgrGrid에 적용할 수 있는 몇 가지 미리 정의된 UI 컨트롤이 있습니다.

    Usage

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

    • IgrGridEditingActions-IgrGrid 편집을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. rowEditable 옵션과 IgrGrid의 행 삭제에 따라 셀이나 행의 편집 모드를 빠르게 전환할 수 있습니다.

    • IgrGridPinningActions-IgrGrid 행 고정을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. 이를 통해 행을 빠르게 고정하고 고정된 행과 비활성화된 행 사이를 탐색할 수 있습니다.

    이는 IgrGrid 내부에 추가되며 기본 상호 작용을 제공하는 IgrActionStrip 갖는 데 모두 필요합니다.

    <IgrGrid id="grid" rowEditable="true" primaryKey="ID">
    <IgrColumn field="field">
    </IgrColumn>
    <IgrActionStrip name="actionStrip">
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

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

    Custom Implementation

    이러한 구성 요소는 사용자 지정을 위한 유연성을 제공하는 템플릿을 노출합니다. 예를 들어, IgrActionStrip 다음과 같은 행 작업이 있는 Gmail 시나리오의 경우 삭제하다, 편집하다 그리고 등등. 아이콘으로 버튼 구성 요소를 만들고 클릭 이벤트를 추가하고 삽입 할 수 있습니다. IgrActionStrip.

    <IgrGrid>
    <IgrActionStrip name="actionStrip">
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions editRow="true" deleteRow="true"></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

    API References

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