Row Actions in Web Components Grid

    The Ignite UI for Web Components Row Actions feature in Web Components 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 IgcGridComponent – editing and pinning.

    Usage

    The predefined actions UI components are:

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

    <igc-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-grid>
    html

    When ActionStripComponent is a child component of the IgcGridComponent, 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-grid>
        <igx-action-strip #actionstrip>
            <igx-grid-pinning-actions></igx-grid-pinning-actions>
            <button title="Edit" igxButton="icon" igxRipple (click)='startEdit(actionstrip.context)'>
                <igx-icon>edit</igx-icon>
            </button>
            <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
                <igx-icon>delete</igx-icon>
            </button>
        </igx-action-strip>
    </igc-grid>
    html
    <igc-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-grid>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Ignite UI for Web Components | CTA Banner

    API References

    Our community is active and always welcoming to new ideas.