Tree Grid Column Reordering & Moving
The Web Components Tree Grid Column Moving feature in Ignite UI for Web Components allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the Web Components Tree Grid, you can enable Column Moving for pinned and unpinned columns and for Multi-Column Headers as well.
Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.
If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the draggable attribute set to false!
If the pinned area exceeds its maximum allowed width (80% of the total IgcTreeGridComponent width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.
public headerTemplate = (ctx: IgcCellTemplateContext) => {
return html`
<igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
`;
}
ts
Web Components Tree Grid Column Moving Overview Example
export class EmployeesFlatDetailsItem {
public constructor(init: Partial<EmployeesFlatDetailsItem>) {
Object.assign(this, init);
}
public Address: string;
public Age: number;
public City: string;
public Country: string;
public Fax: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Phone: string;
public PostalCode: number;
public Title: string;
public LastName: string;
public FullAddress: string;
}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatDetailsItem(
{
Address: `Obere Str. 57`,
Age: 55,
City: `Berlin`,
Country: `Germany`,
Fax: `030-0076545`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Phone: `030-0074321`,
PostalCode: 12209,
Title: `Development Manager`,
LastName: `Winchester`,
FullAddress: `Obere Str. 57, Berlin, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `Avda. de la Constitución 2222`,
Age: 42,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(51) 555-3745`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Phone: `(5) 555-4729`,
PostalCode: 5021,
Title: `CEO`,
LastName: `Sanders`,
FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Mataderos 2312`,
Age: 49,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(5) 555-3995`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Phone: `(5) 555-3932`,
PostalCode: 5023,
Title: `Accounting Manager`,
LastName: `Lincoln`,
FullAddress: `Mataderos 2312, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `120 Hanover Sq.`,
Age: 61,
City: `London`,
Country: `UK`,
Fax: `(171) 555-6750`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Phone: `(171) 555-7788`,
PostalCode: 39000,
Title: `Localization Manager`,
LastName: `Wang`,
FullAddress: `120 Hanover Sq., London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berguvsvägen 8`,
Age: 43,
City: `Luleå`,
Country: `Sweden`,
Fax: `0921-12 34 67`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Phone: `0921-12 34 65`,
PostalCode: 29000,
Title: `Senior Software Developer`,
LastName: `Burke`,
FullAddress: `Berguvsvägen 8, Luleå, Sweden`
}),
new EmployeesFlatDetailsItem(
{
Address: `Forsterstr. 57`,
Age: 29,
City: `Mannheim`,
Country: `Germany`,
Fax: `0621-08924`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Phone: `0621-08460`,
PostalCode: 68306,
Title: `Senior Software Developer`,
LastName: `Anderson`,
FullAddress: `Forsterstr. 57, Mannheim, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `24, place Kléber`,
Age: 31,
City: `Strasbourg`,
Country: `France`,
Fax: `88.60.15.32`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Phone: `88.60.15.31`,
PostalCode: 67000,
Title: `Software Development Team Lead`,
LastName: `Reyes`,
FullAddress: `24, place Kléber, Strasbourg, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `C/ Araquil, 67`,
Age: 35,
City: `Madrid`,
Country: `Spain`,
Fax: `(911) 555 91 99`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Phone: `(91) 555 22 82`,
PostalCode: 28023,
Title: `Senior Software Developer`,
LastName: `Mendel`,
FullAddress: `C/ Araquil, 67, Madrid, Spain`
}),
new EmployeesFlatDetailsItem(
{
Address: `12, rue des Bouchers`,
Age: 44,
City: `Marseille`,
Country: `France`,
Fax: `91.24.45.41`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Phone: `91.24.45.40`,
PostalCode: 13008,
Title: `Senior Software Developer`,
LastName: `Cooper`,
FullAddress: `12, rue des Bouchers, Marseille, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `23 Tsawassen Blvd.`,
Age: 44,
City: `Tsawassen`,
Country: `Canada`,
Fax: `(604) 555-3745`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Phone: `(604) 555-4729`,
PostalCode: 19000,
Title: `Director`,
LastName: `Johnson`,
FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
}),
new EmployeesFlatDetailsItem(
{
Address: `Fauntleroy Circus`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(125) 555-3798`,
HireDate: `2017-11-9`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Phone: `(171) 555-1212`,
PostalCode: 30000,
Title: `Vice President`,
LastName: `Richards`,
FullAddress: `Fauntleroy Circus, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Cerrito 333`,
Age: 39,
City: `Buenos Aires`,
Country: `Argentina`,
Fax: `(121) 135-4892`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Phone: `(1) 135-5555`,
PostalCode: 1010,
Title: `Director`,
LastName: `Ashworth`,
FullAddress: `Cerrito 333, Buenos Aires, Argentina`
}),
new EmployeesFlatDetailsItem(
{
Address: `Sierras de Granada 9993`,
Age: 44,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(153) 555-7293`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Phone: `(5) 555-3392`,
PostalCode: 5022,
Title: `Senior Accountant`,
LastName: `Moreno`,
FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Hauptstr. 29`,
Age: 50,
City: `Sao Paulo`,
Country: `Brazil`,
Fax: `(531) 555-6691`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Phone: `0452-076545`,
PostalCode: 3012,
Title: `Senior Localization Developer`,
LastName: `Rodriguez`,
FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
}),
new EmployeesFlatDetailsItem(
{
Address: `Av. dos Lusíadas, 23`,
Age: 27,
City: `Bern`,
Country: `Switzerland`,
Fax: `(271) 335-357`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Phone: `(11) 555-7647`,
PostalCode: 40000,
Title: `Senior Localization`,
LastName: `Harper`,
FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berkeley Gardens 12`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-9199`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Phone: `(171) 555-2282`,
PostalCode: 26000,
Title: `Localization Intern`,
LastName: `Simpson`,
FullAddress: `Berkeley Gardens 12, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Walserweg 21`,
Age: 39,
City: `Aachen`,
Country: `Germany`,
Fax: `0241-059428`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Phone: `0241-039123`,
PostalCode: 52066,
Title: `Localization Intern`,
LastName: `Chang`,
FullAddress: `Walserweg 21, Aachen, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `35 King George`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-3373`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Phone: `(171) 555-0297`,
PostalCode: 48000,
Title: `Localization Intern`,
LastName: `Lewis`,
FullAddress: `35 King George, London, UK`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private column4: IgcColumnComponent
private column5: IgcColumnComponent
private column6: IgcColumnComponent
private column7: IgcColumnComponent
private column8: IgcColumnComponent
private column9: IgcColumnComponent
private column10: IgcColumnComponent
private column11: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;
var column7 = this.column7 = document.getElementById('column7') as IgcColumnComponent;
var column8 = this.column8 = document.getElementById('column8') as IgcColumnComponent;
var column9 = this.column9 = document.getElementById('column9') as IgcColumnComponent;
var column10 = this.column10 = document.getElementById('column10') as IgcColumnComponent;
var column11 = this.column11 = document.getElementById('column11') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatDetails;
column1.headerTemplate = this.webTreeGridPinHeaderTemplate;
column2.headerTemplate = this.webTreeGridPinHeaderTemplate;
column3.headerTemplate = this.webTreeGridPinHeaderTemplate;
column4.headerTemplate = this.webTreeGridPinHeaderTemplate;
column5.headerTemplate = this.webTreeGridPinHeaderTemplate;
column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
column7.headerTemplate = this.webTreeGridPinHeaderTemplate;
column8.headerTemplate = this.webTreeGridPinHeaderTemplate;
column9.headerTemplate = this.webTreeGridPinHeaderTemplate;
column10.headerTemplate = this.webTreeGridPinHeaderTemplate;
column11.headerTemplate = this.webTreeGridPinHeaderTemplate;
}
this._bind();
}
private _employeesFlatDetails: EmployeesFlatDetails = null;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this._employeesFlatDetails == null)
{
this._employeesFlatDetails = new EmployeesFlatDetails();
}
return this._employeesFlatDetails;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div>
<span style="float:left">${column.field}</span>
<span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
</div>`;
};
public toggleColumnPin(field: string) {
var grid = this.treeGrid;
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
}
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"
moving="true"
column-width="200">
<igc-paginator
per-page="10"
total-records="20">
</igc-paginator>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string"
name="column2"
id="column2">
</igc-column>
<igc-column
field="ID"
data-type="number"
name="column3"
id="column3">
</igc-column>
<igc-column
field="HireDate"
data-type="date"
name="column4"
id="column4">
</igc-column>
<igc-column
field="Age"
data-type="number"
name="column5"
id="column5">
</igc-column>
<igc-column
field="Address"
data-type="string"
name="column6"
id="column6">
</igc-column>
<igc-column
field="City"
data-type="string"
name="column7"
id="column7">
</igc-column>
<igc-column
field="Country"
data-type="string"
name="column8"
id="column8">
</igc-column>
<igc-column
field="Fax"
data-type="string"
name="column9"
id="column9">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
name="column10"
id="column10">
</igc-column>
<igc-column
field="Phone"
data-type="string"
name="column11"
id="column11">
</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
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.
Overview
Column moving feature is enabled on a per-grid level, meaning that the IgcTreeGridComponent
could have either movable or immovable columns. This is done via the moving
input of the IgcTreeGridComponent
.
API
In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically:
moveColumn
- Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter Position
(representing a DropPosition
value), which determines whether to place the column before or after the target column.
// Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
typescript
move
- Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.
// Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
typescript
Note that when using the column moving feature, the ColumnMovingEnd
event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the moving
property to true.
Events
There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are ColumnMovingStart
, ColumnMoving
and ColumnMovingEnd
.
You can subscribe to the ColumnMovingEnd
event of the IgcTreeGridComponent
to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category column after the Change On Year(%) column in the following code snippet.
<igc-tree-grid id="dataGrid" auto-generate="false" moving="true">
<igc-column field="Category"></igc-column>
<igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-tree-grid>
html
constructor() {
var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcTreeGridComponent;
dataGrid.data = this.data;
dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}
typescript
public onColumnMovingEnd(event) {
if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
event.detail.cancel = true;
}
}
typescript
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 to this class:
.grid {
--ig-grid-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
css
Demo
export class EmployeesFlatDetailsItem {
public constructor(init: Partial<EmployeesFlatDetailsItem>) {
Object.assign(this, init);
}
public Address: string;
public Age: number;
public City: string;
public Country: string;
public Fax: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Phone: string;
public PostalCode: number;
public Title: string;
public LastName: string;
public FullAddress: string;
}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatDetailsItem(
{
Address: `Obere Str. 57`,
Age: 55,
City: `Berlin`,
Country: `Germany`,
Fax: `030-0076545`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Phone: `030-0074321`,
PostalCode: 12209,
Title: `Development Manager`,
LastName: `Winchester`,
FullAddress: `Obere Str. 57, Berlin, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `Avda. de la Constitución 2222`,
Age: 42,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(51) 555-3745`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Phone: `(5) 555-4729`,
PostalCode: 5021,
Title: `CEO`,
LastName: `Sanders`,
FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Mataderos 2312`,
Age: 49,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(5) 555-3995`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Phone: `(5) 555-3932`,
PostalCode: 5023,
Title: `Accounting Manager`,
LastName: `Lincoln`,
FullAddress: `Mataderos 2312, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `120 Hanover Sq.`,
Age: 61,
City: `London`,
Country: `UK`,
Fax: `(171) 555-6750`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Phone: `(171) 555-7788`,
PostalCode: 39000,
Title: `Localization Manager`,
LastName: `Wang`,
FullAddress: `120 Hanover Sq., London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berguvsvägen 8`,
Age: 43,
City: `Luleå`,
Country: `Sweden`,
Fax: `0921-12 34 67`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Phone: `0921-12 34 65`,
PostalCode: 29000,
Title: `Senior Software Developer`,
LastName: `Burke`,
FullAddress: `Berguvsvägen 8, Luleå, Sweden`
}),
new EmployeesFlatDetailsItem(
{
Address: `Forsterstr. 57`,
Age: 29,
City: `Mannheim`,
Country: `Germany`,
Fax: `0621-08924`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Phone: `0621-08460`,
PostalCode: 68306,
Title: `Senior Software Developer`,
LastName: `Anderson`,
FullAddress: `Forsterstr. 57, Mannheim, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `24, place Kléber`,
Age: 31,
City: `Strasbourg`,
Country: `France`,
Fax: `88.60.15.32`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Phone: `88.60.15.31`,
PostalCode: 67000,
Title: `Software Development Team Lead`,
LastName: `Reyes`,
FullAddress: `24, place Kléber, Strasbourg, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `C/ Araquil, 67`,
Age: 35,
City: `Madrid`,
Country: `Spain`,
Fax: `(911) 555 91 99`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Phone: `(91) 555 22 82`,
PostalCode: 28023,
Title: `Senior Software Developer`,
LastName: `Mendel`,
FullAddress: `C/ Araquil, 67, Madrid, Spain`
}),
new EmployeesFlatDetailsItem(
{
Address: `12, rue des Bouchers`,
Age: 44,
City: `Marseille`,
Country: `France`,
Fax: `91.24.45.41`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Phone: `91.24.45.40`,
PostalCode: 13008,
Title: `Senior Software Developer`,
LastName: `Cooper`,
FullAddress: `12, rue des Bouchers, Marseille, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `23 Tsawassen Blvd.`,
Age: 44,
City: `Tsawassen`,
Country: `Canada`,
Fax: `(604) 555-3745`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Phone: `(604) 555-4729`,
PostalCode: 19000,
Title: `Director`,
LastName: `Johnson`,
FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
}),
new EmployeesFlatDetailsItem(
{
Address: `Fauntleroy Circus`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(125) 555-3798`,
HireDate: `2017-11-9`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Phone: `(171) 555-1212`,
PostalCode: 30000,
Title: `Vice President`,
LastName: `Richards`,
FullAddress: `Fauntleroy Circus, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Cerrito 333`,
Age: 39,
City: `Buenos Aires`,
Country: `Argentina`,
Fax: `(121) 135-4892`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Phone: `(1) 135-5555`,
PostalCode: 1010,
Title: `Director`,
LastName: `Ashworth`,
FullAddress: `Cerrito 333, Buenos Aires, Argentina`
}),
new EmployeesFlatDetailsItem(
{
Address: `Sierras de Granada 9993`,
Age: 44,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(153) 555-7293`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Phone: `(5) 555-3392`,
PostalCode: 5022,
Title: `Senior Accountant`,
LastName: `Moreno`,
FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Hauptstr. 29`,
Age: 50,
City: `Sao Paulo`,
Country: `Brazil`,
Fax: `(531) 555-6691`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Phone: `0452-076545`,
PostalCode: 3012,
Title: `Senior Localization Developer`,
LastName: `Rodriguez`,
FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
}),
new EmployeesFlatDetailsItem(
{
Address: `Av. dos Lusíadas, 23`,
Age: 27,
City: `Bern`,
Country: `Switzerland`,
Fax: `(271) 335-357`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Phone: `(11) 555-7647`,
PostalCode: 40000,
Title: `Senior Localization`,
LastName: `Harper`,
FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berkeley Gardens 12`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-9199`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Phone: `(171) 555-2282`,
PostalCode: 26000,
Title: `Localization Intern`,
LastName: `Simpson`,
FullAddress: `Berkeley Gardens 12, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Walserweg 21`,
Age: 39,
City: `Aachen`,
Country: `Germany`,
Fax: `0241-059428`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Phone: `0241-039123`,
PostalCode: 52066,
Title: `Localization Intern`,
LastName: `Chang`,
FullAddress: `Walserweg 21, Aachen, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `35 King George`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-3373`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Phone: `(171) 555-0297`,
PostalCode: 48000,
Title: `Localization Intern`,
LastName: `Lewis`,
FullAddress: `35 King George, London, UK`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private column4: IgcColumnComponent
private column5: IgcColumnComponent
private column6: IgcColumnComponent
private column7: IgcColumnComponent
private column8: IgcColumnComponent
private column9: IgcColumnComponent
private column10: IgcColumnComponent
private column11: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;
var column7 = this.column7 = document.getElementById('column7') as IgcColumnComponent;
var column8 = this.column8 = document.getElementById('column8') as IgcColumnComponent;
var column9 = this.column9 = document.getElementById('column9') as IgcColumnComponent;
var column10 = this.column10 = document.getElementById('column10') as IgcColumnComponent;
var column11 = this.column11 = document.getElementById('column11') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatDetails;
column1.headerTemplate = this.webTreeGridPinHeaderTemplate;
column2.headerTemplate = this.webTreeGridPinHeaderTemplate;
column3.headerTemplate = this.webTreeGridPinHeaderTemplate;
column4.headerTemplate = this.webTreeGridPinHeaderTemplate;
column5.headerTemplate = this.webTreeGridPinHeaderTemplate;
column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
column7.headerTemplate = this.webTreeGridPinHeaderTemplate;
column8.headerTemplate = this.webTreeGridPinHeaderTemplate;
column9.headerTemplate = this.webTreeGridPinHeaderTemplate;
column10.headerTemplate = this.webTreeGridPinHeaderTemplate;
column11.headerTemplate = this.webTreeGridPinHeaderTemplate;
}
this._bind();
}
private _employeesFlatDetails: EmployeesFlatDetails = null;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this._employeesFlatDetails == null)
{
this._employeesFlatDetails = new EmployeesFlatDetails();
}
return this._employeesFlatDetails;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div>
<span style="float:left">${column.field}</span>
<span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
</div>`;
};
public toggleColumnPin(field: string) {
var grid = this.treeGrid;
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
}
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"
moving="true"
column-width="200">
<igc-paginator
per-page="10"
total-records="20">
</igc-paginator>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string"
name="column2"
id="column2">
</igc-column>
<igc-column
field="ID"
data-type="number"
name="column3"
id="column3">
</igc-column>
<igc-column
field="HireDate"
data-type="date"
name="column4"
id="column4">
</igc-column>
<igc-column
field="Age"
data-type="number"
name="column5"
id="column5">
</igc-column>
<igc-column
field="Address"
data-type="string"
name="column6"
id="column6">
</igc-column>
<igc-column
field="City"
data-type="string"
name="column7"
id="column7">
</igc-column>
<igc-column
field="Country"
data-type="string"
name="column8"
id="column8">
</igc-column>
<igc-column
field="Fax"
data-type="string"
name="column9"
id="column9">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
name="column10"
id="column10">
</igc-column>
<igc-column
field="Phone"
data-type="string"
name="column11"
id="column11">
</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 */
#grid {
--ig-grid-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
css
API References
Additional Resources
Our community is active and always welcoming to new ideas.