Row Actions in React Tree Grid

    The Ignite UI for React Row Actions feature in React Tree Grid enables developers to use an IgrActionStrip and utilize CRUD for row/cell components and row pinning. There are several predefined UI controls for these operations that are applicable to a specific row in the IgrTreeGrid – editing and pinning.

    Usage

    The predefined actions UI components are:

    • IgrGridEditingActions - includes functionality and UI specifically designed for the IgrTreeGrid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the rowEditable option and row deletion of the IgrTreeGrid.

    • IgrGridPinningActions - includes functionality and UI specifically designed for the IgrTreeGrid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.

    They are added inside the IgrTreeGrid and this is all needed to have an IgrActionStrip providing default interactions.

    <IgrTreeGrid id="treeGrid" rowEditable="true" primaryKey="ID">
        <IgrColumn field="field">
        </IgrColumn>
        <IgrActionStrip name="actionStrip">
            <IgrGridPinningActions></IgrGridPinningActions>
            <IgrGridEditingActions></IgrGridEditingActions>
        </IgrActionStrip>
    </IgrTreeGrid>
    tsx

    When ActionStripComponent is a child component of the IgrTreeGrid, hovering a row will automatically show the UI.

    Custom Implementation

    These components expose templates giving flexibility for customization. For instance, if we would like to use the IgrActionStrip for a Gmail scenario with row actions such as delete, edit and etc. You can simply create button component with icon, add click event to it and insert it into the IgrActionStrip.

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

    EXAMPLE
    DATA
    TSX
    CSS

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    Ignite UI for React | CTA Banner

    API References

    Our community is active and always welcoming to new ideas.