Web Components Tree Grid Conditional Styling
The Ignite UI for Web Components Conditional Styling feature in Web Components Tree Grid allows custom styling on a row or cell level. The IgcTreeGridComponent
Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.
Tree Grid Conditional Row Styling
The IgcTreeGridComponent
component in Ignite UI for Web Components provides two ways to conditional styling of rows based on custom rules.
- By setting
rowClasses
input on theIgcTreeGridComponent
component; - By setting
rowStyles
input on theIgcTreeGridComponent
component;
Further in this topic we will cover both of them in more details.
Using Row Classes
You can conditionally style the IgcTreeGridComponent
rows by setting the rowClasses
input and define custom rules.
<igc-tree-grid id="grid" height="600px" width="100%">
</igc-tree-grid>
html
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
grid.rowClasses = this.rowClasses;
}
ts
The rowClasses
input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
public rowClasses = {
activeRow: (row: IgcRowType) => row.index === 0
}
ts
.activeRow {
border: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
css
Demo
export class EmployeesFlatDataItem {
public constructor(init: Partial<EmployeesFlatDataItem>) {
Object.assign(this, init);
}
public Age: number;
public HireDate: string;
public ID: number;
public Name: string;
public Phone: string;
public OnPTO: boolean;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatDataItem(
{
Age: 55,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
Phone: `0251-031259`,
OnPTO: false,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatDataItem(
{
Age: 42,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
Phone: `(21) 555-0091`,
OnPTO: true,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatDataItem(
{
Age: 49,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
Phone: `(071) 23 67 22 20`,
OnPTO: true,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatDataItem(
{
Age: 61,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
Phone: `(21) 555-0091`,
OnPTO: false,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatDataItem(
{
Age: 43,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Phone: `0452-076545`,
OnPTO: true,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatDataItem(
{
Age: 29,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Phone: `(14) 555-8122`,
OnPTO: false,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatDataItem(
{
Age: 31,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Phone: `7675-3425`,
OnPTO: false,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatDataItem(
{
Age: 35,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatDataItem(
{
Age: 44,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
Phone: `0695-34 67 21`,
OnPTO: true,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
Phone: `981-443655`,
OnPTO: false,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
Phone: `(2) 283-2951`,
OnPTO: true,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
Phone: `981-443655`,
OnPTO: true,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatDataItem(
{
Age: 50,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
Phone: `035-640230`,
OnPTO: false,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatDataItem(
{
Age: 27,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
Phone: `0342-023176`,
OnPTO: true,
ParentID: 10,
Title: `Senior Localization`
}),
new EmployeesFlatDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
Phone: `069-0245984`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
Phone: `(91) 745 6200`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatDataItem(
{
Age: 25,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
Phone: `069-0245984`,
OnPTO: true,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid1: IgcTreeGridComponent
private _bind: () => void;
constructor() {
var treeGrid1 = this.treeGrid1 = document.getElementById('treeGrid1') as IgcTreeGridComponent;
this._bind = () => {
treeGrid1.data = this.employeesFlatData;
treeGrid1.rowClasses = this.webGridRowClassesHandler;
}
this._bind();
}
private _employeesFlatData: EmployeesFlatData = null;
public get employeesFlatData(): EmployeesFlatData {
if (this._employeesFlatData == null)
{
this._employeesFlatData = new EmployeesFlatData();
}
return this._employeesFlatData;
}
public webGridRowClassesHandler = {
activeRow: (row: IgcRowType) => row.index % 2 === 0
};
}
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"
primary-key="ID"
foreign-key="ParentID"
moving="true"
row-editable="true"
name="treeGrid1"
id="treeGrid1">
<igc-column
field="Name"
header="Full Name"
data-type="string">
</igc-column>
<igc-column
field="Age"
header="Age"
data-type="number">
</igc-column>
<igc-column
field="Title"
header="Title"
data-type="string">
</igc-column>
<igc-column
field="HireDate"
header="Hire 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 */
.activeRow {
border-top: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
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.
Using Row Styles
The IgcTreeGridComponent
control exposes the rowStyles
property which allows conditional styling of the data rows. Similar to rowClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).
The callback signature for both
rowStyles
androwClasses
is:
(row: IgcRowType) => boolean
ts
Let's define our styles:
public rowStyles = {
'background': (row: IgcRowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
row.data['Title'].includes('President') ? '#adb5bd' :
row.data['Title'].includes('Director') ? '#ced4da' :
row.data['Title'].includes('Manager') ? '#dee2e6' :
row.data['Title'].includes('Lead') ? '#e9ecef' :
row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
'border-left': (row: IgcRowType) => row.data.data['Title'] === 'CEO' || row.data.data['Title'].includes('President') ?
'2px solid' : null,
'border-color': (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
typescript
<igc-tree-grid id="treeGrid" moving="true" primary-key="ID" foreign-key="ParentID"
width="100%" height="550px">
</igc-tree-grid>
html
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.rowStyles = this.rowStyles;
}
ts
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 } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcRowType } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatDetails;
treeGrid.rowStyles = this.webTreeGridRowStylesHandler;
}
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 webTreeGridRowStylesHandler = {
'background': (row: IgcRowType) => row.data['Title'] === 'CEO' ? '#6c757d' : row.data['Title'].includes('President') ? '#adb5bd' :
row.data['Title'].includes('Director') ? '#ced4da' : row.data['Title'].includes('Manager') ? '#dee2e6' :
row.data['Title'].includes('Lead') ? '#e9ecef' : row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
'border-left': (row: IgcRowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
'border-color': (row: IgcRowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
'color': (row: IgcRowType) => row.data['Title'] === 'CEO' ? '#fff' : null
};
}
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">
<igc-column
field="Name"
data-type="string"
sortable="true"
filterable="true"
editable="true">
</igc-column>
<igc-column
field="Age"
data-type="number"
resizable="false"
filterable="false"
editable="true">
</igc-column>
<igc-column
field="Title"
data-type="string"
resizable="true"
filterable="true"
editable="true">
</igc-column>
<igc-column
field="HireDate"
data-type="date"
resizable="true"
filterable="true"
editable="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 */
css
Tree Grid Conditional Cell Styling
Overview
The IgcTreeGridComponent
component in Ignite UI for Web Components provides two ways to conditional styling of cells based on custom rules.
- By setting the
IgcColumnComponent
inputcellClasses
to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.
Using Cell Classes
You can conditionally style the IgcTreeGridComponent
cells by setting the IgcColumnComponent
cellClasses
input and define custom rules.
<igc-column id="unitPrice" field="UnitPrice" header="Unit Price" data-type="currency"></igc-column>
html
constructor() {
var unitPrice = this.UnitPrice = document.getElementById('unitPrice') as IgcColumnComponent;
unitPrice.cellClasses = this.unitPriceCellClasses;
}
ts
The cellClasses
input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
private downPriceCondition = (rowData: any, columnKey: any): boolean => {
return rowData[columnKey] <= 5;
}
private upPriceCondition = (rowData: any, columnKey: any): boolean => {
return rowData[columnKey] > 5;
}
public unitPriceCellClasses = {
downPrice: this.downPriceCondition,
upPrice: this.upPriceCondition
};
typescript
.upPrice {
color: red !important;
}
.downPrice {
color: green !important;
}
css
Demo
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));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
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 _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;
this._bind = () => {
treeGrid.data = this.ordersTreeData;
column1.cellClasses = this.webTreeGridAllergensCellClassesHandler;
column2.cellClasses = this.webTreeGridUnitPriceCellClassesHandler;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
public allergenItems = ['Frozen Shrimps', 'Wild Salmon Fillets', 'Fresh Cheese', 'Skimmed Milk 1L', 'Butter'];
public webTreeGridAllergensCellClassesHandler = {
allergensFont: (rowData: any, columnKey: any): boolean => this.allergenItems.indexOf(rowData[columnKey]) >= 0,
}
public webTreeGridUnitPriceCellClassesHandler = {
downPrice: (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 5,
upPrice: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 5,
}
}
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
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="ID"
header="Order ID"
data-type="string">
</igc-column>
<igc-column
field="Name"
header="Order Product"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Category"
data-type="string">
</igc-column>
<igc-column
field="Units"
data-type="number">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="currency"
name="column2"
id="column2">
</igc-column>
<igc-column
field="Price"
data-type="currency">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
data-type="date">
</igc-column>
<igc-column
field="Delivered"
data-type="boolean">
</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 */
.allergensFont {
color: royalblue !important;
}
.upPrice {
color: red !important;
}
.downPrice {
color: green !important;
}
css
- By using the
IgcColumnComponent
inputcellStyles
which accepts an object literal where the keys are style properties and the values are expressions for evaluation.
The callback signature for both
cellStyles
andcellClasses
is now changed to:
(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
ts
Using Cell Styles
Columns expose the cellStyles
property which allows conditional styling of the column cells. Similar to cellClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).
Let's define our styles:
public webTreeGridCellStylesHandler = {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
color: (rowData, columnKey, cellValue, rowIndex) => {
if (columnKey === "UnitPrice") {
if (cellValue > 10) return "#dc3545";
if (cellValue < 5) return "#28a745";
if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
}
}
}
ts
<igc-column id="col1">
</igc-column>
html
constructor() {
var col1 = document.getElementById('col1') as IgcColumnComponent;
col1.cellStyles = this.webTreeGridCellStylesHandler;
}
ts
Demo
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));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
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 _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;
this._bind = () => {
treeGrid.data = this.ordersTreeData;
column1.cellStyles = this.webTreeGridCellStylesHandler;
column2.cellStyles = this.webTreeGridCellStylesHandler;
column3.cellStyles = this.webTreeGridCellStylesHandler;
column4.cellStyles = this.webTreeGridCellStylesHandler;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
public webTreeGridCellStylesHandler = {
background: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
color: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => {
if (columnKey === "UnitPrice") {
if (cellValue > 10) return "#dc3545";
if (cellValue < 5) return "#28a745";
if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
}
return undefined;
}
};
}
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
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="ID"
header="Order ID"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Name"
header="Order Product"
data-type="string"
name="column2"
id="column2">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="currency"
name="column3"
id="column3">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
name="column4"
id="column4">
</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
Known issues and limitations
- If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met.
A check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that.
public backgroundClasses = {
myBackground: (rowData: any, columnKey: string) => {
return rowData.Col2 < 10;
}
};
public editDone(evt) {
this.Col1.cellClasses = {...this.backgroundClasses};
}
ts
<igc-tree-grid id="grid1" height="500px" width="100%" >
<igc-column id="Col1" field="Col1" data-type="number"></igx-column>
<igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
<igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
<igc-tree-grid>
html
constructor() {
var grid = this.grid = document.getElementById('grid1') as IgcTreeGrid;
var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
grid.data = this.data;
grid.onCellEdit = this.editDone;
Col1.cellClasses = this.backgroundClasses;
Col2.cellClasses = this.backgroundClasses;
Col3.cellClasses = this.backgroundClasses;
}
ts
API References
Additional Resources
Our community is active and always welcoming to new ideas.