Web Components Tree Grid Summaries
The Ignite UI for Web Components Summaries feature in Web Components Tree Grid functions on a per-column level as group footer. Web Components IgcTreeGrid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom template in the IgcTreeGridComponent
.
Web Components Tree Grid Summaries Overview Example
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 { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
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 _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;
this._bind = () => {
treeGrid.data = this.ordersTreeData;
column1.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column2.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column3.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column4.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column5.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column6.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
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 webTreeGridSummariesHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div>
<span style="float:left">${column.field}</span>
<span style="float:right; color: ${column.hasSummary ? '#e41c77' : ''}" @pointerdown=${(e: any) => this.toggleSummary(column)}>∑</span>
</div>`;
};
public toggleSummary(field: IgcColumnComponent) {
if (field) {
field.hasSummary = !field.hasSummary;
}
}
}
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-column
field="ID"
header="Order ID">
</igc-column>
<igc-column
field="Name"
header="Order Product"
has-summary="true"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Units"
header="Units"
data-type="number"
has-summary="true"
editable="true"
name="column2"
id="column2">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="number"
has-summary="true"
editable="true"
name="column3"
id="column3">
</igc-column>
<igc-column
field="Price"
header="Price"
data-type="number"
has-summary="true"
editable="true"
name="column4"
id="column4">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
data-type="date"
has-summary="true"
name="column5"
id="column5">
</igc-column>
<igc-column
field="Delivered"
header="Delivered"
data-type="boolean"
has-summary="true"
name="column6"
id="column6">
</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.
The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values
IgcTreeGridComponent
summaries can also be enabled on a per-column level in Ignite UI for Web Components, which means that you can activate it only for columns that you need. IgcTreeGridComponent
summaries gives you a predefined set of default summaries, depending on the type of data in the column, so that you can save some time:
For string
and boolean
dataType
, the following function is available:
- Count
For number
, currency
and percent
data types, the following functions are available:
- Count
- Min
- Max
- Average
- Sum
For date
data type, the following functions are available:
- Count
- Earliest
- Latest
All available column data types could be found in the official Column types topic.
IgcTreeGridComponent
summaries are enabled per-column by setting hasSummary
property to true. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the IgcTreeGridComponent
the default column data type is string
, so if you want number
or date
specific summaries you should specify the dataType
property as number
or date
. Note that the summary values will be displayed localized, according to the grid locale
and column pipeArgs
.
<igc-tree-grid id="grid1" auto-generate="false" height="800px" width="800px">
<igc-column field="ID" header="Order ID">
</igc-column>
<igc-column field="Name" header="Order Product" has-summary="true">
</igc-column>
<igc-column field="Units" header="Units" editable="true" data-type="number" has-summary="true">
</igc-column>
</igc-tree-grid>
html
The other way to enable/disable summaries for a specific column or a list of columns is to use the public method enableSummaries
/disableSummaries
of the IgcTreeGridComponent
.
<igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID">
<igx-column field="ID" header="Order ID" width="200px">
</igx-column>
<igx-column field="Name" header="Order Product" width="200px" [hasSummary]="true">
</igx-column>
<igx-column field="Units" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
</igx-column>
</igc-tree-grid>
<button id="enableBtn">Enable Summary</button>
<button id="disableBtn">Disable Summary </button>
html
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGrid;
var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
treeGrid.data = this.data;
enableBtn.addEventListener("click", this.enableSummary);
disableBtn.addEventListener("click", this.disableSummary);
}
ts
public enableSummary() {
this.treeGrid.enableSummaries([
{fieldName: 'Name'},
{fieldName: 'Units'}
]);
}
public disableSummary() {
this.treeGrid.disableSummaries(['Units']);
}
typescript
Custom Tree Grid Summaries
If these functions do not fulfill your requirements you can provide a custom summary for the specific columns.
In order to achieve this you have to override one of the base classes IgcSummaryOperand
, IgcNumberSummaryOperand
or IgcDateSummaryOperand
according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. IgcSummaryOperand
class provides the default implementation only for the count
method. IgcNumberSummaryOperand
extends IgcSummaryOperand
and provides implementation for the Min
, Max
, Sum
and Average
. IgcDateSummaryOperand
extends IgcSummaryOperand
and additionally gives you Earliest
and Latest
.
import { IgcSummaryResult, IgcSummaryOperand, IgcNumberSummaryOperand, IgcDateSummaryOperand } from 'igniteui-webcomponents-grids';
class MySummary extends IgcNumberSummaryOperand {
constructor() {
super();
}
operate(data?: any[]): IgcSummaryResult[] {
const result = super.operate(data);
result.push({
key: 'test',
label: 'Test',
summaryResult: data.filter(rec => rec > 10 && rec < 30).length
});
return result;
}
}
typescript
As seen in the examples, the base classes expose the operate
method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results.
The method returns a list of IgcSummaryResult
.
interface IgcSummaryResult {
key: string;
label: string;
summaryResult: any;
}
typescript
and take optional parameters for calculating the summaries. See Custom summaries, which access all data section below.
In order to calculate the summary row height properly, the Tree Grid needs the Operate method to always return an array of IgcSummaryResult with the proper length even when the data is empty.
And now let's add our custom summary to the column title
. We will achieve that by setting the Summaries` property to the class we create below.
<igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID">
<igc-column field="Name" data-type="string"></igc-column>
<igc-column field="Age" data-type="number"></igc-column>
<igc-column field="Title" data-type="string" has-summary="true" id="column1"></igc-column>
</igc-tree-grid>
html
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGrid;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
treeGrid.data = this.data;
column1.summaries = this.mySummary;
}
ts
export class TreeGridComponent implements OnInit {
mySummary = MySummary;
}
typescript
Custom summaries, which access all data
Now you can access all Tree Grid data inside the custom column summary. Two additional optional parameters are introduced in the SummaryOperand Operate
method.
As you can see in the code snippet below the operate method has the following three parameters:
- columnData - gives you an array that contains the values only for the current column
- allGridData - gives you the whole grid data source
- fieldName - current column field
class MySummary extends IgcNumberSummaryOperand {
constructor() {
super();
}
operate(columnData: any[], allGridData = [], fieldName?): IgcSummaryResult[] {
const result = super.operate(allData.map(r => r[fieldName]));
result.push({ key: 'totalOnPTO', label: 'Employees On PTO', summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName])) });
return result;
}
}
typescript
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, items)));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcColumnComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
class PtoSummary {
count(data: any[]): number {
return data.length;
};
operate(data?: any[], allData: any[] = [], fieldName = ''): any[] {
const result = [] as any[];
result.push({
key: 'totalOnPTO',
label: 'Employees On PTO',
summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'devs',
label: 'Developers',
summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'tl',
label: 'Team Leads',
summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'managers',
label: 'Managers/Directors',
summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'ceo',
label: 'CEO/President',
summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']).map(r => r[fieldName]))
});
return result;
}
}
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.employeesFlatData;
column1.summaries = PtoSummary;
}
this._bind();
}
private _employeesFlatData: EmployeesFlatData = null;
public get employeesFlatData(): EmployeesFlatData {
if (this._employeesFlatData == null)
{
this._employeesFlatData = new EmployeesFlatData();
}
return this._employeesFlatData;
}
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;
}
}
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
class="gridSize"
height="620px"
auto-generate="false"
name="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="Name"
data-type="string">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="Title"
data-type="string"
has-summary="true"
name="column1"
id="column1">
</igc-column>
<igc-column
field="HireDate"
data-type="date"
has-summary="true">
</igc-column>
<igc-column
field="OnPTO"
data-type="boolean"
has-summary="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 */
.gridSize {
--ig-size: var(--ig-size-small);
}
css
Summary Template
Summary
targets the column summary providing as a context the column summary results.
<igc-column id="column" has-summary="true">
</igc-column>
html
constructor() {
var column = this.column = document.getElementById('column') as IgcColumnComponent;
column.summaryTemplate = this.summaryTemplate;
}
public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
return html`
<span> My custom summary template</span>
<span>${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }</span>
`;
}
ts
When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the --ig-size
of the grid. Use the summaryRowHeight
input property to override the default value. As an argument it expects a number value, and setting a falsy value will trigger the default sizing behavior of the grid footer.
export class EmployeesNestedTreeDataItem {
public constructor(init: Partial<EmployeesNestedTreeDataItem>) {
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 EmployeesNestedTreeData extends Array<EmployeesNestedTreeDataItem> {
public constructor(items: Array<EmployeesNestedTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesNestedTreeDataItem(
{
Age: 55,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
Phone: `0251-031259`,
OnPTO: false,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 42,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
Phone: `(21) 555-0091`,
OnPTO: true,
ParentID: -1,
Title: `CEO`
}),
new EmployeesNestedTreeDataItem(
{
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 EmployeesNestedTreeDataItem(
{
Age: 61,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
Phone: `(21) 555-0091`,
OnPTO: false,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 43,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Phone: `0452-076545`,
OnPTO: true,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 29,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Phone: `(14) 555-8122`,
OnPTO: false,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 31,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Phone: `7675-3425`,
OnPTO: false,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesNestedTreeDataItem(
{
Age: 35,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
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 EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
Phone: `981-443655`,
OnPTO: false,
ParentID: 4,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
Phone: `(2) 283-2951`,
OnPTO: true,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
Phone: `981-443655`,
OnPTO: true,
ParentID: 5,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesNestedTreeDataItem(
{
Age: 50,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
Phone: `035-640230`,
OnPTO: false,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 27,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
Phone: `0342-023176`,
OnPTO: true,
ParentID: 10,
Title: `Senior Localization`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
Phone: `069-0245984`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
Phone: `(91) 745 6200`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcSummaryResult, IgcSummaryTemplateContext } 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';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private summaryRowHeightEditor: IgcPropertyEditorPropertyDescriptionComponent
private toggleSummariesEditor: IgcPropertyEditorPropertyDescriptionComponent
private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var summaryRowHeightEditor = this.summaryRowHeightEditor = document.getElementById('SummaryRowHeightEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var toggleSummariesEditor = this.toggleSummariesEditor = document.getElementById('ToggleSummariesEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridHasSummariesChange = this.webTreeGridHasSummariesChange.bind(this);
var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridSetGridSize = this.webTreeGridSetGridSize.bind(this);
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.treeGrid;
toggleSummariesEditor.changed = this.webTreeGridHasSummariesChange;
sizeEditor.changed = this.webTreeGridSetGridSize;
treeGrid.data = this.employeesNestedTreeData;
column1.summaryTemplate = this.webTreeGridSummaryTemplate;
}
this._bind();
}
private _employeesNestedTreeData: EmployeesNestedTreeData = null;
public get employeesNestedTreeData(): EmployeesNestedTreeData {
if (this._employeesNestedTreeData == null)
{
this._employeesNestedTreeData = new EmployeesNestedTreeData();
}
return this._employeesNestedTreeData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridHasSummariesChange(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
let newValue = sender.primitiveValue as boolean;
const grid = this.treeGrid;
var column1 = grid.getColumnByName("Age");
var column2 = grid.getColumnByName("Title");
var column3 = grid.getColumnByName("OnPTO");
column1.hasSummary = newValue;
column2.hasSummary = newValue;
column3.hasSummary = newValue;
}
public webTreeGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("treeGrid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
public webTreeGridSummaryTemplate = (ctx: IgcSummaryTemplateContext) => {
const summaryResults = ctx.implicit as IgcSummaryResult[];
return html`<div class="summary-temp">
<span><strong>${summaryResults[0].label}</strong><span>${summaryResults[0].summaryResult}</span></span>
<span><strong>${summaryResults[1].label}</strong><span>${summaryResults[1].summaryResult}</span></span>
<span><strong>${summaryResults[2].label}</strong><span>${summaryResults[2].summaryResult}</span></span>
<span><strong>${summaryResults[3].label}</strong><span>${summaryResults[3].summaryResult}</span></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="options vertical">
<igc-property-editor-panel
description-type="WebTreeGrid"
is-horizontal="true"
is-wrapping-enabled="false"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="SummaryRowHeight"
label="Summary Row Height"
value-type="Number"
name="SummaryRowHeightEditor"
id="SummaryRowHeightEditor">
</igc-property-editor-property-description>
<igc-property-editor-property-description
label="Toggle Summaries"
value-type="Boolean1"
primitive-value="True"
name="ToggleSummariesEditor"
id="ToggleSummariesEditor">
</igc-property-editor-property-description>
<igc-property-editor-property-description
name="SizeEditor"
id="SizeEditor"
label="Grid Size:"
value-type="EnumValue"
drop-down-names="Small, Medium, Large"
drop-down-values="Small, Medium, Large">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="Name">
</igc-column>
<igc-column
field="Age"
data-type="number"
has-summary="true"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
has-summary="true">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</igc-column>
<igc-column
field="OnPTO"
data-type="boolean"
editable="true"
has-summary="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 */
.summary-temp {
display: flex;
flex-direction: column;
margin: 0 1px;
font-size: 14px;
line-height: 24px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
> * {
padding: 8px 0;
line-height: 18px;
border-bottom: 1px dashed hsla(var(--igx-gray-400));
&:last-child {
border-bottom: none;
}
}
}
.summary-temp span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
justify-content: space-between;
color: hsla(var(--ig-gray-900));
}
.summary-temp span span {
user-select: all;
max-width: 300px;
padding-right: 8px;
}
.summary-temp span strong {
font-size: 14px;
text-transform: uppercase;
min-width: 70px;
justify-self: flex-start;
text-align: left;
color: hsla(var(--ig-secondary-600));
user-select: none;
}
css
Disabled Summaries
The disabled-summaries
property provides precise per-column control over the Web Components Tree Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgcTreeGrid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as ['count', 'min', 'max']
by specifying their summary keys in an array.
This property can also be modified dynamically at runtime through code, providing flexibility to adapt the IgcTreeGrid's summaries to changing application states or user actions.
The following examples illustrate how to use the disabled-summaries
property to manage summaries for different columns and exclude specific default and custom summary types in the Web Components Tree Grid:
<!-- Disable default summaries -->
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="number"
has-summary="true"
disabled-summaries="['count', 'sum', 'average']"
>
</igc-column>
<!-- Disable custom summaries -->
<igc-column
field="UnitsInStock"
header="Units In Stock"
data-type="number"
has-summary="true"
summaries="discontinuedSummary"
disabled-summaries="['discontinued', 'totalDiscontinued']"
>
</igc-column>
html
For UnitPrice
, default summaries like count
, sum
, and average
are disabled, leaving others like min
and max
active.
For UnitsInStock
, custom summaries such as discontinued
and totalDiscontinued
are excluded using the disabled-summaries
property.
At runtime, summaries can also be dynamically disabled using the disabled-summaries
property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes.
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 { defineComponents, IgcButtonComponent, IgcDialogComponent, IgcCheckboxComponent } from "igniteui-webcomponents";
import { ComponentRenderer, WebGridDescriptionModule } from "igniteui-webcomponents-core";
import { IgcTreeGridComponent, IgcColumnComponent, IgcSummaryOperand, IgcSummaryResult } from "igniteui-webcomponents-grids/grids";
import { OrdersTreeData } from "./OrdersTreeData";
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
defineComponents(IgcButtonComponent, IgcDialogComponent, IgcCheckboxComponent);
class UnitsSummary extends IgcSummaryOperand {
constructor() {
super();
}
operate(data?: any[], allData: any[] = [], fieldName: string = ""): IgcSummaryResult[] {
const result: IgcSummaryResult[] = [];
const values = allData.map((rec) => rec[fieldName]).filter((value) => value !== undefined && value !== null);
const totalSum = values.reduce((sum, value) => sum + value, 0);
const sortedValues = values.slice().sort((a, b) => a - b);
const deliveredValues = allData
.filter((rec) => rec["Delivered"])
.map((rec) => rec[fieldName])
.filter((value) => value !== undefined && value !== null);
result.push({
key: "count",
label: "Count",
summaryResult: allData.length
});
result.push({
key: "min",
label: "Min",
summaryResult: values.length > 0 ? Math.min(...values) : "N/A"
});
result.push({
key: "max",
label: "Max",
summaryResult: values.length > 0 ? Math.max(...values) : "N/A"
});
result.push({
key: "sum",
label: "Sum",
summaryResult: totalSum
});
result.push({
key: "average",
label: "Average",
summaryResult: values.length > 0 ? totalSum / values.length : "N/A"
});
result.push({
key: "totalDelivered",
label: "Total Units Delivered",
summaryResult: deliveredValues.length > 0 ? deliveredValues.reduce((sum, value) => sum + value, 0) : "N/A"
});
result.push({
key: "medianUnits",
label: "Median Units",
summaryResult:
values.length > 0
? (() => {
const mid = Math.floor(sortedValues.length / 2);
return sortedValues.length % 2 !== 0 ? sortedValues[mid] : (sortedValues[mid - 1] + sortedValues[mid]) / 2;
})()
: "N/A"
});
result.push({
key: "uniqueCount",
label: "Count of Unique Unit Values",
summaryResult: values.length > 0 ? new Set(values).size : "N/A"
});
result.push({
key: "maxDifference",
label: "Max Difference Between Units",
summaryResult:
values.length > 1
? values.reduce((maxDiff, value, idx, arr) => {
if (idx === 0) return maxDiff;
const diff = Math.abs(value - arr[idx - 1]);
return Math.max(maxDiff, diff);
}, 0)
: "N/A"
});
return result;
}
}
class DeliveredSummary extends IgcSummaryOperand {
constructor() {
super();
}
operate(data: any[] = [], allData: any[] = [], fieldName: string = ""): IgcSummaryResult[] {
const result: IgcSummaryResult[] = [];
result.push({
key: "count",
label: "Count",
summaryResult: allData.length
});
result.push({
key: "true",
label: "True",
summaryResult: allData.filter((item) => item[fieldName] === true).length
});
result.push({
key: "false",
label: "False",
summaryResult: allData.filter((item) => item[fieldName] === false).length
});
return result;
}
}
export class Sample {
private treeGrid: IgcTreeGridComponent;
private dialog: IgcDialogComponent;
private _bind: () => void;
private currentColumn: IgcColumnComponent | null = null;
private summariesContainer: HTMLDivElement | null = null;
private disableAllBtn!: HTMLButtonElement;
private enableAllBtn!: HTMLButtonElement;
constructor() {
this.treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
this.dialog = document.getElementById("dialog") as IgcDialogComponent;
this.dialog.closeOnOutsideClick = true;
this.dialog.keepOpenOnEscape = false;
this.summariesContainer = document.querySelector(".summaries");
if (this.summariesContainer) {
const title = document.createElement("p");
title.classList.add("summaries-title");
title.textContent = "Disable Summaries for Column:";
this.summariesContainer.appendChild(title);
}
this.disableAllBtn = document.getElementById("disableAllBtn") as HTMLButtonElement;
this.enableAllBtn = document.getElementById("enableAllBtn") as HTMLButtonElement;
this.webGridCustomSummary = this.webGridCustomSummary.bind(this);
this.openDialog = this.openDialog.bind(this);
this.toggleSummary = this.toggleSummary.bind(this);
this.disableAllSummaries = this.disableAllSummaries.bind(this);
this.enableAllSummaries = this.enableAllSummaries.bind(this);
this.handleColumnInit = this.handleColumnInit.bind(this);
this.updateCheckboxes = this.updateCheckboxes.bind(this);
this._bind = () => {
this.treeGrid.data = this.ordersTreeData;
this.treeGrid.addEventListener("columnInit", this.handleColumnInit);
document.getElementById("disableAllBtn")!.addEventListener("click", this.disableAllSummaries);
document.getElementById("enableAllBtn")!.addEventListener("click", this.enableAllSummaries);
};
this._bind();
}
private handleColumnInit(event: any) {
this.webGridCustomSummary(event);
const column: IgcColumnComponent = event.detail;
if (!this.summariesContainer) return;
const button = document.createElement("igc-button");
button.classList.add("summary-button");
button.textContent = column.header ? column.header.toString() : column.field;
button.setAttribute("variant", "contained");
button.addEventListener("click", () => this.openDialog(column));
this.summariesContainer.appendChild(button);
}
private _ordersTreeData: OrdersTreeData | undefined;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null) {
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
private _componentRenderer: ComponentRenderer | undefined;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
WebGridDescriptionModule.register(this._componentRenderer.context);
}
return this._componentRenderer;
}
public webGridCustomSummary(args: any): void {
if (args.detail.field === "Units") {
args.detail.summaries = UnitsSummary;
}
if (args.detail.field === "Delivered") {
args.detail.summaries = DeliveredSummary;
}
}
private updateCheckboxes() {
if (!this.currentColumn) return;
const dialogItemsContainer = this.dialog.querySelector(".summaries-dialog-items")!;
dialogItemsContainer.innerHTML = "";
let allSummaries: IgcSummaryResult[] = [];
const getSummaryResults = (operand: any): IgcSummaryResult[] => {
if (typeof operand === "function") {
operand = new operand();
}
if (operand instanceof IgcSummaryOperand) {
return operand.operate([], this.treeGrid.data, this.currentColumn!.field);
}
return [];
};
if (!this.currentColumn.summaries) {
const defaultOperand = IgcSummaryOperand;
allSummaries = getSummaryResults(defaultOperand);
} else {
allSummaries = getSummaryResults(this.currentColumn.summaries);
}
let allDisabled = true;
let allEnabled = true;
allSummaries.forEach((summary) => {
const checkbox = document.createElement("igc-checkbox") as IgcCheckboxComponent;
checkbox.classList.add("summaries-dialog-item");
checkbox.textContent = summary.label;
const isDisabled = this.currentColumn!.disabledSummaries?.includes(summary.key);
checkbox.checked = isDisabled;
if (isDisabled) {
allEnabled = false;
} else {
allDisabled = false;
}
checkbox.addEventListener("click", () => this.toggleSummary(summary.key));
dialogItemsContainer.appendChild(checkbox);
});
this.disableAllBtn.disabled = allDisabled;
this.enableAllBtn.disabled = allEnabled;
}
public openDialog(column: IgcColumnComponent) {
this.currentColumn = column;
this.dialog.title = `Disable Summaries for ${column.header || column.field}`;
this.updateCheckboxes();
this.dialog.show();
}
public toggleSummary(summaryKey: string) {
if (!this.currentColumn) return;
if (!this.currentColumn.disabledSummaries) {
this.currentColumn.disabledSummaries = [];
}
if (this.currentColumn.disabledSummaries.includes(summaryKey)) {
this.currentColumn.disabledSummaries = this.currentColumn.disabledSummaries.filter((key: string) => key !== summaryKey);
} else {
this.currentColumn.disabledSummaries = [...this.currentColumn.disabledSummaries, summaryKey];
}
this.updateCheckboxes();
}
public disableAllSummaries() {
if (!this.currentColumn) return;
let allSummaryKeys: string[] = [];
const getSummaryKeys = (operand: any): string[] => {
if (typeof operand === "function") {
operand = new operand();
}
if (operand instanceof IgcSummaryOperand) {
if (this.treeGrid && this.currentColumn) {
return operand.operate([], this.treeGrid.data, this.currentColumn.field).map((s: { key: any; }) => s.key);
}
return [];
}
return [];
};
if (!this.currentColumn.summaries) {
const defaultOperand = IgcSummaryOperand;
allSummaryKeys = getSummaryKeys(defaultOperand);
} else {
allSummaryKeys = getSummaryKeys(this.currentColumn.summaries);
}
this.currentColumn.disabledSummaries = allSummaryKeys;
this.updateCheckboxes();
this.treeGrid.markForCheck();
}
public enableAllSummaries() {
if (!this.currentColumn) return;
this.currentColumn.disabledSummaries = [];
this.updateCheckboxes();
this.treeGrid.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="grid-wrapper">
<div class="summaries">
<igc-dialog id="dialog" title="Disabled Summaries">
<div class="summaries-dialog-items"></div>
<igc-button id="disableAllBtn" slot="footer" variant="flat">Disable All</igc-button>
<igc-button id="enableAllBtn" slot="footer" variant="flat">Enable All</igc-button>
</igc-dialog>
</div>
<igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID">
<igc-column field="ID" header="Order ID" has-summary="true"> </igc-column>
<igc-column field="Name" header="Order Product" has-summary="true"> </igc-column>
<igc-column field="Units" header="Units" data-type="number" has-summary="true"> </igc-column>
<igc-column field="UnitPrice" header="Unit Price" data-type="number" has-summary="true"> </igc-column>
<igc-column field="Price" header="Price" data-type="number" has-summary="true"> </igc-column>
<igc-column field="Delivered" header="Delivered" data-type="boolean" has-summary="true"> </igc-column>
<igc-column field="OrderDate" header="Order Date" data-type="date" has-summary="true"> </igc-column>
</igc-tree-grid>
</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.grid-wrapper {
margin: 0 auto;
padding: 16px;
height: 87%;
}
.grid-wrapper .summaries {
margin-bottom: 1rem;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.grid-wrapper .summaries-title {
margin: 0 0 1rem 0;
flex-basis: 100%;
font-weight: bold;
}
.grid-wrapper .summary-button {
margin-right: 1rem;
}
igc-dialog {
border: 1px solid #e0e0e0;
border-radius: 8px;
}
igc-dialog::part(title) {
color: #1E6DFE;
}
.summaries-dialog-items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.summaries-dialog-items .summaries-dialog-item {
display: flex;
align-items: center;
padding: 0 1rem;
}
css
Formatting summaries
By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid locale
and column pipeArgs
. When using custom operands, the locale
and pipeArgs
are not applied. If you want to change the default appearance of the summary results, you may format them using the summaryFormatter
property.
public dateSummaryFormat(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
const result = summary.summaryResult;
if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) {
const format = new Intl.DateTimeFormat("en", { year: "numeric" });
return format.format(new Date(result));
}
return result;
}
typescript
<igc-column id="column"></igx-column>
html
constructor() {
var column = this.column = document.getElementById('column') as IgcColumnComponent;
column.summaryFormatter = this.dateSummaryFormat;
}
ts
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 { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import { IgcSummaryResult, IgcSummaryOperand } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
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.webTreeGridSummaryFormatter = this.webTreeGridSummaryFormatter.bind(this);
this._bind = () => {
treeGrid.data = this.ordersTreeData;
column1.summaryFormatter = this.webTreeGridSummaryFormatter;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
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 webTreeGridSummaryFormatter(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
const result = summary.summaryResult;
if (summary.key !== "count" && result !== null && result !== undefined) {
const format = new Intl.DateTimeFormat("en", { year: "numeric" });
return format.format(new Date(result));
}
return result;
}
}
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-filtering="true"
filter-mode="excelStyleFilter">
<igc-column
field="ID"
header="Order ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Order Product"
sortable="true">
</igc-column>
<igc-column
field="Category"
header="Product Category"
sortable="true">
</igc-column>
<igc-column
field="Units"
header="Units"
data-type="number"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="number"
sortable="true">
</igc-column>
<igc-column
field="Price"
header="Price"
data-type="number"
sortable="true">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
data-type="date"
has-summary="true"
sortable="true"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Delivered"
header="Delivered"
data-type="boolean"
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 */
css
Child Summaries
The IgcTreeGridComponent
supports separate summaries for the root nodes and for each nested child node level. Which summaries are shown is configurable using the summaryCalculationMode
property. The child level summaries can be shown before or after the child nodes using the summaryPosition
property. Along with these two properties the IgcTreeGridComponent
exposes and showSummaryOnCollapse
property which allows you to determine whether the summary row stays visible when the parent node that refers to is collapsed.
The available values of the summaryCalculationMode
property are:
RootLevelOnly
- Summaries are calculated only for the root level nodes.ChildLevelsOnly
- Summaries are calculated only for the child levels.RootAndChildLevels
- Summaries are calculated for both root and child levels. This is the default value.
The available values of the summaryPosition
property are:
Top
- The summary row appears before the list of child rows.Bottom
- The summary row appears after the list of child rows. This is the default value.
The showSummaryOnCollapse
property is boolean. Its default value is set to false, which means that the summary row would be hidden when the parent row is collapsed. If the property is set to true the summary row stays visible when parent row is collapsed.
The summaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgcTreeGridComponent.
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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private summaryCalculationModeEditor: IgcPropertyEditorPropertyDescriptionComponent
private summaryPositionEditor: IgcPropertyEditorPropertyDescriptionComponent
private showSummaryOnCollapseEditor: IgcPropertyEditorPropertyDescriptionComponent
private treeGrid: IgcTreeGridComponent
private _bind: () => void;
constructor() {
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var summaryCalculationModeEditor = this.summaryCalculationModeEditor = document.getElementById('SummaryCalculationModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridChangeSummaryCalculationMode = this.webTreeGridChangeSummaryCalculationMode.bind(this);
var summaryPositionEditor = this.summaryPositionEditor = document.getElementById('SummaryPositionEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridChangeSummaryPosition = this.webTreeGridChangeSummaryPosition.bind(this);
var showSummaryOnCollapseEditor = this.showSummaryOnCollapseEditor = document.getElementById('ShowSummaryOnCollapseEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.treeGrid;
summaryCalculationModeEditor.changed = this.webTreeGridChangeSummaryCalculationMode;
summaryPositionEditor.changed = this.webTreeGridChangeSummaryPosition;
treeGrid.data = this.ordersTreeData;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridChangeSummaryCalculationMode(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.summaryCalculationMode = args.newValue;
}
public webTreeGridChangeSummaryPosition(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.summaryPosition = args.newValue;
}
}
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="options vertical">
<igc-property-editor-panel
description-type="WebTreeGrid"
is-horizontal="true"
is-wrapping-enabled="false"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
name="SummaryCalculationModeEditor"
id="SummaryCalculationModeEditor"
label="Summary Calculation Mode"
value-type="EnumValue"
drop-down-names="rootLevelOnly, childLevelsOnly, rootAndChildLevels"
drop-down-values="rootLevelOnly, childLevelsOnly, rootAndChildLevels">
</igc-property-editor-property-description>
<igc-property-editor-property-description
name="SummaryPositionEditor"
id="SummaryPositionEditor"
label="Summary Position"
value-type="EnumValue"
drop-down-names="top, bottom"
drop-down-values="top, bottom">
</igc-property-editor-property-description>
<igc-property-editor-property-description
label="Show summary row when group row is collapsed:"
property-path="ShowSummaryOnCollapse"
name="ShowSummaryOnCollapseEditor"
id="ShowSummaryOnCollapseEditor">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="ID"
header="Order ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Order Product"
has-summary="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Price"
data-type="number"
has-summary="true"
editable="true">
</igc-column>
<igc-column
field="Delivered"
data-type="boolean">
</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
Keyboard Navigation
The summary rows can be navigated with the following keyboard interactions:
- UP - navigates one cell up.
- DOWN - navigates one cell down.
- LEFT - navigates one cell left.
- RIGHT - navigates one cell right.
- CTRL + LEFT or HOME - navigates to the leftmost cell.
- CTRL + RIGHT or END - navigates to the rightmost cell.
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-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
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 { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
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 _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;
this._bind = () => {
treeGrid.data = this.ordersTreeData;
column1.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column2.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column3.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column4.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column5.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column6.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
column7.headerTemplate = this.webTreeGridSummariesHeaderTemplate;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
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 webTreeGridSummariesHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div>
<span style="float:left">${column.field}</span>
<span style="float:right; color: ${column.hasSummary ? '#e41c77' : ''}" @pointerdown=${(e: any) => this.toggleSummary(column)}>∑</span>
</div>`;
};
public toggleSummary(field: IgcColumnComponent) {
if (field) {
field.hasSummary = !field.hasSummary;
}
}
}
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-column
field="ID"
header="Order ID">
</igc-column>
<igc-column
field="Name"
header="Order Product"
has-summary="true"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Category"
header="Category"
has-summary="true"
name="column2"
id="column2">
</igc-column>
<igc-column
field="Units"
header="Units"
data-type="number"
has-summary="true"
editable="true"
name="column3"
id="column3">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="number"
has-summary="true"
editable="true"
name="column4"
id="column4">
</igc-column>
<igc-column
field="Price"
header="Price"
data-type="number"
has-summary="true"
editable="true"
name="column5"
id="column5">
</igc-column>
<igc-column
field="Delivered"
header="Delivered"
data-type="boolean"
has-summary="true"
name="column6"
id="column6">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
data-type="date"
has-summary="true"
name="column7"
id="column7">
</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 */
#treeGrid {
--ig-grid-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
css
API References
Additional Resources
Our community is active and always welcoming to new ideas.