Web Components Tree Grid Toolbar
The Ignite UI for Web Components Toolbar in is a container for UI operations in the Web Components Tree Grid. The Web Components toolbar is located at the top of the Web Components component, i.e., the IgcTreeGridComponent
and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the Web Components Tree Grid includes:
- Column Hiding
- Column Pinning
- Excel Exporting
- Advanced Filtering
The toolbar and the predefined UI components support Web Components events and expose API for developers.
Web Components Toolbar Grid Example
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
}
this._bind();
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID"
allow-advanced-filtering="true">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-advanced-filtering
>
</igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter
>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string">
</igc-column>
<igc-column
field="ID"
data-type="number">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</igc-column>
</igc-tree-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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
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.
The predefined Actions
and title
UI components are added inside the IgcGridToolbar
and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:
<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="true">
<igc-grid-toolbar>
<igc-grid-toolbar-title>Tree Grid Toolbar</igc-grid-toolbar-title>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering><igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
</igc-tree-grid>
html
As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgcGridToolbarActions container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.
Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty:
<igc-tree-grid primary-key="ID" foreign-key="ParentID" auto-generate="true">
<igc-grid-toolbar>
</igc-grid-toolbar>
</igc-tree-grid>
html
For a comprehensive look over each of the default UI components, continue reading the Features section below.
Features
The toolbar is great at separating logic/interactions which affects the grid as a whole.
As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid.
These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Web Components suite.
Listed below are the main features of the toolbar with example code for each of them.
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport { IgcCellTemplateContext, IgcColumnComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { defineComponents, IgcAvatarComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import { EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { html } from 'lit-html';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
import "./index.css";
defineComponents(IgcAvatarComponent, IgcInputComponent, IgcSwitchComponent);
export class Sample {
constructor() {
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = document.getElementById('column1') as IgcColumnComponent;
treeGrid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
var inputTitle = document.getElementById('inputTitle') as IgcInputComponent;
var switchFiltering = document.getElementById('enableFiltering') as IgcSwitchComponent;
var switchHiding = document.getElementById('enableHiding') as IgcSwitchComponent;
var switchPinning = document.getElementById('enablePinning') as IgcSwitchComponent;
var switchExport = document.getElementById('enableExport') as IgcSwitchComponent;
var toolbarTitle = document.getElementById('toolbarTitle');
var toolbarFiltering = document.getElementById('toolbarFiltering');
var toolbarHiding = document.getElementById('toolbarHiding');
var toolbarPinning = document.getElementById('toolbarPinning');
var toolbarExporter = document.getElementById('toolbarExporter');
inputTitle.addEventListener('igcInput', (evt: CustomEvent) => {
toolbarTitle.textContent = evt.detail;
});
switchFiltering.addEventListener('igcChange', () => {
toolbarFiltering.hidden = !switchFiltering.checked;
});
switchHiding.addEventListener('igcChange', () => {
toolbarHiding.hidden = !switchHiding.checked;
});
switchPinning.addEventListener('igcChange', () => {
toolbarPinning.hidden = !switchPinning.checked;
});
switchExport.addEventListener('igcChange', () => {
toolbarExporter.hidden = !switchExport.checked;
});
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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">
<div class="container">
<div class="control_panel">
<igc-input id="inputTitle" type="text" label="Toolbar title" value="Tree grid toolbar"></igc-input>
<igc-switch id="enableFiltering" checked>Advanced Filtering</igc-switch>
<igc-switch id="enableHiding" checked>Column hiding</igc-switch>
<igc-switch id="enablePinning" checked>Column pinning</igc-switch>
<igc-switch id="enableExport" checked>Exporting</igc-switch>
</div>
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" height="400px">
<igc-grid-toolbar>
<igc-grid-toolbar-title id="toolbarTitle">Tree grid toolbar</igc-grid-toolbar-title>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering id="toolbarFiltering"></igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding id="toolbarHiding"></igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning id="toolbarPinning"></igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter id="toolbarExporter"></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column id="column1" field="Name" data-type="string"></igc-column>
<igc-column field="Title" data-type="string"></igc-column>
<igc-column field="ID" data-type="number"></igc-column>
<igc-column field="Age" data-type="number"></igc-column>
<igc-column field="HireDate" data-type="date"></igc-column>
</igc-tree-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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
.control_panel {
width: 700px;
margin-bottom: 10px;
}
css
Title
Setting a title for the toolbar in your grid is achieved by using the IgcGridToolbarTitle
.
Users can provide anything from simple text to more involved templates.
<igc-grid-toolbar>
<igc-grid-toolbar-title>Grid toolbar title</igc-grid-toolbar-title>
</igc-grid-toolbar>
html
Actions
The IgcGridToolbarActions
is where users can place actions/interactions in relation to the parent grid.
As with the title portion of the toolbar, users can provide anything inside that template part, including the default
toolbar interaction components.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<!-- ... -->
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Column Pinning
The IgcGridToolbarPinning
component provides the default UI for interacting with column pinning in the grid.
The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-pinning
title="Grid pinned columns"
prompt="Filter column collection"
column-list-height="400px">
</igc-grid-toolbar-pinning>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Column Hiding
The IgcGridToolbarHiding
provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component
title, the placeholder for the component input and the height of the dropdown itself.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-hiding
title="Grid column hiding"
prompt="Filter column collection"
column-list-height="400px">
</igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Advanced Filtering
Toolbar Advanced Filtering component provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering>Custom text for the toggle button</igc-grid-toolbar-advanced-filtering>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Data Exporting
As with the rest of the toolbar actions, exporting is provided through a IgcGridToolbarExporter
out of the box.
The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience.
These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the ToolbarExporter
.
Here is a snippet showing some of the options which can be customized through the Web Components template:
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-exporter export-csv="true" export-excel="true" filename="exported_data">
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting
event and customizing the options entry in the event properties.
By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.
The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options:
<igc-tree-grid id="treeGrid"></igc-tree-grid>
html
constructor() {
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.addEventListener("toolbarExporting", this.configureExport);
}
public configureExport(evt: CustomEvent<IgcGridToolbarExportEventArgs>) {
const args = evt.detail;
const options: IgcExporterOptionsBase = args.options;
if (options) {
options.fileName = `Report_${new Date().toDateString()}`;
(args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
columnArgs.cancel = columnArgs.header === 'Name';
});
}
}
ts
The following sample demonstrates how to customize the exported files:
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgcExporterOptionsBase, IgcGridToolbarExportEventArgs } from 'igniteui-webcomponents-grids/grids';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this.webTreeGridToolbarExporting = this.webTreeGridToolbarExporting.bind(this);
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatAvatars;
treeGrid.addEventListener("toolbarExporting", this.webTreeGridToolbarExporting);
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
}
this._bind();
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridToolbarExporting(evt: CustomEvent<IgcGridToolbarExportEventArgs>): void {
const args = evt.detail;
const options: IgcExporterOptionsBase = args.options;
if (options) {
options.fileName = `Report_${new Date().toDateString()}`;
(args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
columnArgs.cancel = columnArgs.header === 'Name';
});
}
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-exporter
>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string">
</igc-column>
<igc-column
field="ID"
data-type="number">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</igc-column>
</igc-tree-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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
css
Exporting Indicator
When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress.
Moreover, users can set the toolbar ShowProgress
property and use for their own long running operations or just as another way to signify an action taking place in the grid.
The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid:
export class OrdersTreeDataItem {
public constructor(init: Partial<OrdersTreeDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public Category: string;
public OrderDate: string;
public Units: number;
public UnitPrice: number;
public Price: number;
public Delivered: boolean;
}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OrdersTreeDataItem(
{
ID: 1,
ParentID: -1,
Name: `Order 1`,
Category: ``,
OrderDate: `2010-02-17`,
Units: 1844,
UnitPrice: 3.73,
Price: 6884.38,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chocolate Chip Cookies`,
Category: `Cookies`,
OrderDate: `2010-02-17`,
Units: 834,
UnitPrice: 3.59,
Price: 2994.06,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 102,
ParentID: 1,
Name: `Red Apples`,
Category: `Fruit`,
OrderDate: `2010-02-17`,
Units: 371,
UnitPrice: 3.66,
Price: 1357.86,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 103,
ParentID: 1,
Name: `Butter`,
Category: `Diary`,
OrderDate: `2010-02-17`,
Units: 260,
UnitPrice: 3.45,
Price: 897,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 104,
ParentID: 1,
Name: `Potato Chips`,
Category: `Snack`,
OrderDate: `2010-02-17`,
Units: 118,
UnitPrice: 1.96,
Price: 231.28,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 105,
ParentID: 1,
Name: `Orange Juice`,
Category: `Beverages`,
OrderDate: `2010-02-17`,
Units: 261,
UnitPrice: 5.38,
Price: 1404.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 2,
ParentID: -1,
Name: `Order 2`,
Category: ``,
OrderDate: `2022-05-27`,
Units: 1831,
UnitPrice: 8.23,
Price: 15062.77,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 201,
ParentID: 2,
Name: `Frozen Shrimps`,
Category: `Seafood`,
OrderDate: `2022-05-27`,
Units: 120,
UnitPrice: 20.45,
Price: 2454,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 202,
ParentID: 2,
Name: `Ice Tea`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 840,
UnitPrice: 7,
Price: 5880,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 203,
ParentID: 2,
Name: `Fresh Cheese`,
Category: `Diary`,
OrderDate: `2022-05-27`,
Units: 267,
UnitPrice: 16.55,
Price: 4418.85,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 204,
ParentID: 2,
Name: `Carrots`,
Category: `Vegetables`,
OrderDate: `2022-05-27`,
Units: 360,
UnitPrice: 2.77,
Price: 997.2,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 205,
ParentID: 2,
Name: `Apple Juice`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 244,
UnitPrice: 5.38,
Price: 1312.72,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 3,
ParentID: -1,
Name: `Order 3`,
Category: ``,
OrderDate: `2022-08-04`,
Units: 1972,
UnitPrice: 3.47,
Price: 6849.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 301,
ParentID: 3,
Name: `Skimmed Milk 1L`,
Category: `Diary`,
OrderDate: `2022-08-04`,
Units: 1028,
UnitPrice: 3.56,
Price: 3659.68,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 302,
ParentID: 3,
Name: `Bananas 5 Pack`,
Category: `Fruit`,
OrderDate: `2022-08-04`,
Units: 370,
UnitPrice: 6.36,
Price: 2353.2,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 303,
ParentID: 3,
Name: `Cauliflower`,
Category: `Vegetables`,
OrderDate: `2022-08-04`,
Units: 283,
UnitPrice: 0.95,
Price: 268.85,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 304,
ParentID: 3,
Name: `White Chocolate Cookies`,
Category: `Cookies`,
OrderDate: `2022-08-04`,
Units: 291,
UnitPrice: 1.95,
Price: 567.45,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 4,
ParentID: -1,
Name: `Order 4`,
Category: ``,
OrderDate: `2023-01-04`,
Units: 1065,
UnitPrice: 5.56,
Price: 5923.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 401,
ParentID: 4,
Name: `Mini Milk Chocolate Cookie Bites`,
Category: `Cookies`,
OrderDate: `2023-01-04`,
Units: 68,
UnitPrice: 2.25,
Price: 153,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 402,
ParentID: 4,
Name: `Wild Salmon Fillets`,
Category: `Seafood`,
OrderDate: `2023-01-04`,
Units: 320,
UnitPrice: 16.15,
Price: 5168,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 403,
ParentID: 4,
Name: `Diet Lemonade`,
Category: `Beverages`,
OrderDate: `2023-01-04`,
Units: 437,
UnitPrice: 0.5,
Price: 218.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 404,
ParentID: 4,
Name: `Potatoes`,
Category: `Vegetables`,
OrderDate: `2023-01-04`,
Units: 240,
UnitPrice: 1.6,
Price: 384,
Delivered: true
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport { IgcGridToolbarComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
import { OrdersTreeData } from './OrdersData';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
defineComponents(IgcButtonComponent);
export class Sample {
constructor() {
const localData: any[] = [];
for (let i = 0; i < 10000; i += 3) {
for (let c = 0; c < this.ordersTreeData.length; c++) {
localData.push(this.ordersTreeData[c]);
}
}
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.data = localData;
var toolbar = document.getElementById('toolbar') as IgcGridToolbarComponent;
var button = document.getElementById('simulate') as IgcButtonComponent;
button.addEventListener('click', () => {
toolbar.showProgress = true;
setTimeout(() => {
toolbar.showProgress = false;
}, 5000);
});
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
}
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">
<div class="container fill">
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" height="350px">
<igc-grid-toolbar id="toolbar">
<igc-button id="simulate">
Simulate long running operation
</igc-button>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column field="ID" header="Order ID">
</igc-column>
<igc-column field="Name" header="Order Product">
</igc-column>
<igc-column field="Category" header="Category">
</igc-column>
<igc-column field="Units" header="Units" data-type="number">
</igc-column>
<igc-column field="UnitPrice" header="Unit Price" data-type="currency">
</igc-column>
<igc-column field="Price" header="Price" data-type="currency">
</igc-column>
<igc-column field="OrderDate" header="Order Date" data-type="date">
</igc-column>
</igc-tree-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
Custom Content
If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable.
Here is a sample snippet:
<igc-tree-grid id="grid">
<igc-grid-toolbar>
<igc-grid-toolbar-title>title</igx-grid-toolbar-title>
<!--
Everything between the toolbar tags except the default toolbar components/directives
will be projected as custom content.
-->
<igc-grid-toolbar-actions>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
</igc-tree-grid>
html
The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers:
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport { IgcCellTemplateContext, IgcColumnComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { defineComponents, IgcAvatarComponent, IgcButtonComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import { EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { html } from 'lit-html';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
import "./index.css";
defineComponents(IgcButtonComponent, IgcIconComponent, IgcAvatarComponent);
const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>`;
export class Sample {
constructor() {
registerIconFromText('clear', icon, 'material');
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = document.getElementById('column1') as IgcColumnComponent;
treeGrid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
var button = document.getElementById('clearSort') as IgcButtonComponent;
button.addEventListener("click", () => {
treeGrid.clearSort();
});
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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">
<div class="container fill">
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" height="400px">
<igc-grid-toolbar>
<igc-grid-toolbar-title>Tree Grid Toolbar</igc-grid-toolbar-title>
<igc-button id="clearSort">
<igc-icon name="clear" collection="material"></igc-icon>Clear Sort
</igc-button>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column id="column1" field="Name" data-type="string"></igc-column>
<igc-column field="Title" data-type="string" sortable="true"></igc-column>
<igc-column field="ID" data-type="number" sortable="true"></igc-column>
<igc-column field="Age" data-type="number" sortable="true"></igc-column>
<igc-column field="HireDate" data-type="date" sortable="true"></igc-column>
</igc-tree-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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
css
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:
<igc-tree-grid class="grid"></igc-tree-grid>
html
Then set the related CSS properties for that class:
.grid {
--ig-grid-toolbar-background-color: #2a2b2f;
--ig-grid-toolbar-title-text-color: #ffcd0f;
--ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css
Demo
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
}
this._bind();
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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-tree-grid
auto-generate="false"
name="grid"
id="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
allow-advanced-filtering="true">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-advanced-filtering
>
</igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter
>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string">
</igc-column>
<igc-column
field="ID"
data-type="number">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</igc-column>
</igc-tree-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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
#grid {
--ig-grid-toolbar-background-color: #2a2b2f;
--ig-grid-toolbar-title-text-color: #ffcd0f;
--ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css
API References
The Grid Toolbar service has a few more APIs to explore, which are listed below.
IgcTreeGridComponent
Events:ToolbarExporting
Additional Resources
Our community is active and always welcoming to new ideas.