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.
IgcGridPinningActions - includes functionality and UI specifically designed for the IgcGridComponent row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.
They are added inside the IgcGridComponent and this is all needed to have an IgcActionStrip providing default interactions.
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.
import { IgcPropertyEditorPanelModule } from'igniteui-webcomponents-layouts';
import'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from'igniteui-webcomponents-core';
import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import NwindData from'./NwindData.json';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import { ModuleManager } from'igniteui-webcomponents-core';
import"./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
exportclassSample{
private grid: IgcGridComponent
private _pinningConfig1: IgcPinningConfig | null = null;
publicgetpinningConfig1(): IgcPinningConfig {
if (this._pinningConfig1 == null)
{
var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
pinningConfig1.rows = RowPinningPosition.Top;
this._pinningConfig1 = pinningConfig1;
}
returnthis._pinningConfig1;
}
private actionStrip: IgcActionStripComponent
private productName: IgcColumnComponent
private unitPrice: IgcColumnComponent
private unitsOnOrder: IgcColumnComponent
private unitsInStock: IgcColumnComponent
private quantityPerUnit: IgcColumnComponent
private reorderLevel: IgcColumnComponent
private discontinued: IgcColumnComponent
private _bind: () =>void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
var actionStrip = this.actionStrip = document.getElementById('actionStrip') as IgcActionStripComponent;
var productName = this.productName = document.getElementById('ProductName') as IgcColumnComponent;
var unitPrice = this.unitPrice = document.getElementById('UnitPrice') as IgcColumnComponent;
var unitsOnOrder = this.unitsOnOrder = document.getElementById('UnitsOnOrder') as IgcColumnComponent;
var unitsInStock = this.unitsInStock = document.getElementById('UnitsInStock') as IgcColumnComponent;
var quantityPerUnit = this.quantityPerUnit = document.getElementById('QuantityPerUnit') as IgcColumnComponent;
var reorderLevel = this.reorderLevel = document.getElementById('ReorderLevel') as IgcColumnComponent;
var discontinued = this.discontinued = document.getElementById('Discontinued') as IgcColumnComponent;
this._bind = () => {
grid.data = this.nwindData;
grid.pinning = this.pinningConfig1;
}
this._bind();
}
private _nwindData: any[] = NwindData;
publicgetnwindData(): any[] {
returnthis._nwindData;
}
private _componentRenderer: ComponentRenderer = null;
publicgetrenderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
returnthis._componentRenderer;
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-gridauto-generate="false"name="grid"id="grid"row-editable="true"allow-filtering="true"primary-key="ProductID"><igc-action-stripname="actionStrip"id="actionStrip"><igc-grid-pinning-actions
></igc-grid-pinning-actions><igc-grid-editing-actionsedit-row="true"delete-row="true"add-row="true"></igc-grid-editing-actions></igc-action-strip><igc-columnname="ProductName"id="ProductName"field="ProductName"header="Product Name"></igc-column><igc-columnname="UnitPrice"id="UnitPrice"field="UnitPrice"header="Unit Price"></igc-column><igc-columnname="UnitsOnOrder"id="UnitsOnOrder"field="UnitsOnOrder"header="Units On Order"></igc-column><igc-columnname="UnitsInStock"id="UnitsInStock"field="UnitsInStock"header="Units In Stock"></igc-column><igc-columnname="QuantityPerUnit"id="QuantityPerUnit"field="QuantityPerUnit"header="Quantity Per Unit"></igc-column><igc-columnname="ReorderLevel"id="ReorderLevel"field="ReorderLevel"header="Reorder Level"></igc-column><igc-columnname="Discontinued"id="Discontinued"field="Discontinued"header="Discontinued"></igc-column></igc-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="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.