Acciones de fila en Web Components cuadrícula de árbol

The Ignite UI for Web Components Row Actions feature in Web Components Tree Grid enables developers to use an IgcActionStrip 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 IgcTreeGridComponent – editing and pinning.

Usage

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

IgcGridEditingActions - includes functionality and UI specifically designed for the IgcTreeGridComponent editing. It allows you to quickly toggle edit mode for cells or rows, depending on the RowEditable option and row deletion of the IgcTreeGridComponent.
IgcGridPinningActions - includes functionality and UI specifically designed for the IgcTreeGridComponent row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.

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

<igc-tree-grid row-editable="true" primary-key="ID">
    <igc-column field="field"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

[!Note] When ActionStripComponent is a child component of the IgcTreeGridComponent, 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 IgcActionStrip 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 IgcActionStrip.

<igc-tree-grid>
    <igc-action-strip #actionstrip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

API References

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