Acciones de fila en React Grid

    La función Ignite UI for React Acciones de fila en React cuadrícula permite a los desarrolladores usar IgrActionStrip y utilizar CRUD para componentes de fila/celda y fijación de filas. Hay varios controles de interfaz de usuario predefinidos para estas operaciones que son aplicables a una fila específica en la edición y el IgrGrid anclaje.

    Usage

    Los componentes de la interfaz de usuario de acciones predefinidas son:

    • IgrGridEditingActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición IgrGrid. Le permite alternar rápidamente el modo de edición para celdas o filas, según la opción rowEditable y la eliminación de filas de IgrGrid.

    • IgrGridPinningActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la fijación de filas IgrGrid. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.

    Se agregan dentro de IgrGrid y todo esto es necesario para tener un IgrActionStrip que proporcione interacciones predeterminadas.

    <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

    Estos componentes exponen plantillas que brindan flexibilidad para la personalización. Por ejemplo, si queremos usar el IgrActionStrip para un escenario de Gmail con acciones de fila como eliminar, editar, etc. Simplemente puede crear un componente de botón con un icono, agregarle un evento de clic e insertarlo en el IgrActionStrip.

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

    API References

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.