Acciones de fila en la cuadrícula de árbol Angular

    El componente de cuadrícula de árbol de Ignite UI for Angular proporciona la capacidad de utilizar ActionStrip y CRUD para los componentes de fila/celda y la fijación de filas. El componente Action Strip puede alojar controles de interfaz de usuario predefinidos para estas operaciones.

    Uso

    El primer paso es importar el IgxActionStripModule en nuestro archivo app.module.ts:

    // app.module.ts
    
    ...
    import { IgxActionStripModule } from 'igniteui-angular';
    // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxActionStripModule],
        ...
    })
    typescript

    Los componentes de la interfaz de usuario actions predefinidas son:

    • IgxGridEditingActionsComponent: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición de cuadrículas. 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 la cuadrícula.

    • IgxGridPinningActionsComponent: incluye funcionalidad y interfaz de usuario diseñadas específicamente para fijar filas de cuadrícula. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.

    Se agregan dentro de <igx-action-strip> y todo esto es necesario para tener una Action Strip que proporcione interacciones predeterminadas.

    <igx-tree-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
        <igx-column *ngFor="let c of columns" [field]="c.field">
        </igx-column>
    
        <igx-action-strip #actionStrip>
            <igx-grid-pinning-actions></igx-grid-pinning-actions>
            <igx-grid-editing-actions></igx-grid-editing-actions>
        </igx-action-strip>
    </igx-tree-grid>
    html

    Cuando IgxActionStripComponent es un componente secundario de la cuadrícula, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.

    Implementación personalizada

    Estos componentes exponen plantillas que brindan flexibilidad para la personalización. Por ejemplo, si quisiéramos utilizar el ActionStrip para un escenario de Gmail con acciones de fila como delete, edit y etc. Simplemente puede crear un componente de botón con igx-icon, agréguele el evento de clic e insértelo en el igx-action-strip componente.

    <igx-grid>
        <igx-action-strip #actionstrip>
            <igx-grid-pinning-actions></igx-grid-pinning-actions>
            <button title="Edit" igxIconButton="flat" igxRipple (click)='startEdit(actionstrip.context)'>
                <igx-icon>edit</igx-icon>
            </button>
            <button title="Delete" igxIconButton="flat" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
                <igx-icon>delete</igx-icon>
            </button>
        </igx-action-strip>
    </igx-grid>
    html

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Las acciones predefinidas heredan IgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredar IgxGridActionsBaseDirective.

    Referencias de API

    Para obtener información más detallada sobre la API Action Strip, consulte los siguientes enlaces:

    Componentes y/o directivas adicionales que se pueden utilizar dentro de Action Strip: