Row Actions in Web Components Hierarchical Grid

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

Usage

The predefined actions UI components are:

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

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

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

When ActionStripComponent is a child component of the IgcHierarchicalGridComponent, 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-hierarchical-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-hierarchical-grid>
html

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private hierarchicalGrid1: IgcHierarchicalGridComponent
    private _pinningConfig1: IgcPinningConfig | null = null;
    public get pinningConfig1(): IgcPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }

    private actionStrip: IgcActionStripComponent
    private _bind: () => void;

    constructor() {
        var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
        var actionStrip = this.actionStrip = document.getElementById('actionStrip') as IgcActionStripComponent;

        this._bind = () => {
            hierarchicalGrid1.data = this.singersData;
            hierarchicalGrid1.pinning = this.pinningConfig1;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        row-editable="true"
        allow-filtering="true"
        name="hierarchicalGrid1"
        id="hierarchicalGrid1">
            <igc-action-strip
            name="actionStrip"
            id="actionStrip">
                <igc-grid-pinning-actions
                >
                </igc-grid-pinning-actions>
                <igc-grid-editing-actions
                edit-row="true"
                delete-row="true"
                add-row="true">
                </igc-grid-editing-actions>
            </igc-action-strip>
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string"
            sortable="true">
            </igc-column>
            <igc-column
            field="Photo"
            header="Photo"
            data-type="image"
            sortable="true">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            sortable="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false">
                <igc-column
                field="Album"
                header="Album"
                data-type="string"
                sortable="true">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date"
                sortable="true">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string"
                sortable="true">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string"
                sortable="true">
                </igc-column>
                <igc-row-island
                child-data-key="Songs"
                auto-generate="false">
                    <igc-column
                    field="Number"
                    header="No."
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Title"
                    header="Title"
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Released"
                    header="Released"
                    data-type="date">
                    </igc-column>
                    <igc-column
                    field="Genre"
                    header="Genre"
                    data-type="string">
                    </igc-column>
                </igc-row-island>
            </igc-row-island>
            <igc-row-island
            child-data-key="Tours"
            auto-generate="false">
                <igc-column
                field="Tour"
                header="Tour"
                data-type="string">
                </igc-column>
                <igc-column
                field="StartedOn"
                header="Started on"
                data-type="string">
                </igc-column>
                <igc-column
                field="Location"
                header="Location"
                data-type="string">
                </igc-column>
                <igc-column
                field="Headliner"
                header="Headliner"
                data-type="string">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

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.

API References

Our community is active and always welcoming to new ideas.