Row Actions in React Hierarchical Grid

    The Ignite UI for React Row Actions feature in React Hierarchical 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 IgrHierarchicalGrid – editing and pinning.

    Usage

    The predefined actions UI components are:

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

    <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

    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.

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

    API References

    Our community is active and always welcoming to new ideas.