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:
IgrGridEditingActions
- includes functionality and UI specifically designed for theIgrHierarchicalGrid
editing. It allows you to quickly toggle edit mode for cells or rows, depending on therowEditable
option and row deletion of theIgrHierarchicalGrid
.IgrGridPinningActions
- includes functionality and UI specifically designed for theIgrHierarchicalGrid
row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.
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 theIgrHierarchicalGrid
, 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.