Acciones de fila en la cuadrícula de árbol React
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
Los componentes de la interfaz de usuario de acciones predefinidas son:
IgrGridEditingActions- incluye funcionalidad e interfaz diseñadas específicamente para laIgrTreeGridedición. Te permite cambiar rápidamente el modo de edición para celdas o filas, dependiendo de larowEditableopción y la eliminación deIgrTreeGridfilas.IgrGridPinningActions- incluye funcionalidad e interfaz diseñadas específicamente para elIgrTreeGridfijado de filas. Te permite fijar filas rápidamente y navegar entre filas fijadas y sus equivalentes deshabilitados.
Se añaden dentro de laIgrTreeGrid y todo esto es necesario para proporcionarIgrActionStrip interacciones predeterminadas.
<IgrTreeGrid rowEditable={true} primaryKey="ID">
<IgrColumn field="field">
</IgrColumn>
<IgrActionStrip>
<IgrGridPinningActions></IgrGridPinningActions>
<IgrGridEditingActions></IgrGridEditingActions>
</IgrActionStrip>
</IgrTreeGrid>
[!Note] When
ActionStripComponentis a child component of theIgrTreeGrid, hovering a row will automatically show the UI.
Custom Implementation
Estos componentes exponen plantillas que ofrecen flexibilidad para la personalización. Por ejemplo, si queremos usar elIgrActionStrip para un escenario de Gmail con acciones de fila como eliminar, editar, etc. Simplemente puedes crear un componente de botón con icono, añadir un evento de clic e insertarlo en elIgrActionStrip.
<IgrTreeGrid>
<IgrActionStrip>
<IgrGridPinningActions></IgrGridPinningActions>
<IgrGridEditingActions editRow={true} deleteRow={true}></IgrGridEditingActions>
</IgrActionStrip>
</IgrTreeGrid>
API References
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.