React Tree Grid Cell Selection
The Ignite UI for React Cell Selection in React Tree Grid enables rich data select capabilities and offers powerful API in the IgrTreeGrid
component. The React Tree Grid supports three selection modes:
Tree Grid Multiple Cell Selection
Tree Grid Single Selection
Tree Grid None Selection
Let's dive deeper into each of these options.
React Tree Grid Cell Selection Example
The sample below demonstrates the three types of IgrTreeGrid
's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
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 ));
}
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this .propertyEditor = r;
this .setState({});
}
private cellSelectionEditor: IgrPropertyEditorPropertyDescription
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .propertyEditorRef = this .propertyEditorRef.bind(this );
this .treeGridRef = this .treeGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
ref ={this.propertyEditorRef}
componentRenderer ={this.renderer}
target ={this.treeGrid}
descriptionType ="WebTreeGrid"
isHorizontal ="true"
isWrappingEnabled ="true" >
<IgrPropertyEditorPropertyDescription
propertyPath ="CellSelection"
name ="CellSelectionEditor"
label ="Cell Selection"
valueType ="EnumValue"
dropDownNames ={[ "None ", "Single ", "Multiple "]}
dropDownValues ={[ "None ", "Single ", "Multiple "]}>
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ="false"
ref ={this.treeGridRef}
id ="treeGrid"
data ={this.employeesFlatData}
primaryKey ="ID"
foreignKey ="ParentID" >
<IgrColumn
field ="ID" >
</IgrColumn >
<IgrColumn
field ="Name" >
</IgrColumn >
<IgrColumn
field ="Age"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="Title" >
</IgrColumn >
<IgrColumn
field ="HireDate"
header ="Hire Date"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="OnPTO"
header ="On PTO"
dataType ="Boolean" >
</IgrColumn >
</IgrTreeGrid >
</div >
</div >
);
}
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;
PropertyEditorPanelDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Selection Types
Tree Grid Multiple-Cell Selection
How to select cells:
By Mouse drag - Rectangular data selection of cells would be performed.
By Ctrl key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding Shift key the cell selection range will be updated based on the first selected cell position (starting point).
Keyboard multi-cell selection by using the Arrow keys while holding Shift key. Multi-cell selection range will be created based on the focused cell.
Keyboard multi-cell selection by using the Ctrl + ↑ ↓ ← → keys and Ctrl + Home /End while holding Shift key. Multi-cell selection range will be created based on the focused cell.
Clicking with the Left Mouse key while holding Ctrl key will add single cell ranges into the selected cells collection.
Continuous multiple cell selection is available, by clicking with the mouse and dragging.
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 , items)));
}
}
}
ts コピー import React , { useRef } from "react" ;
import ReactDOM from 'react-dom/client' ;
import "./index.css" ;
import {
IgrGridModule,
IgrTreeGridModule,
IgrGridBaseDirective,
} from "@infragistics/igniteui-react-grids" ;
import { IgrGrid, IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { EmployeesFlatData } from "./EmployeesFlatData" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrGridModule,
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default function App() {
const employeesFlatData = new EmployeesFlatData();
const leftTreeGridRef = useRef<IgrTreeGrid > (null );
const rightGridRef = useRef<IgrGrid > (null );
function handleTreeGridRangeSelectionChanged(grid: IgrGridBaseDirective) {
rightGridRef.current!.data = grid.getSelectedData(
false ,
false
) as unknown as any [];
}
return (
<div className ="container sample" >
<div className ="container horizontal wrapper" >
<IgrTreeGrid
autoGenerate ="false"
ref ={leftTreeGridRef}
id ="leftTreeGrid"
width ="50%"
height ="100%"
data ={employeesFlatData}
primaryKey ="ID"
foreignKey ="ParentID"
cellSelection ="multiple"
rangeSelected ={handleTreeGridRangeSelectionChanged}
>
<IgrColumn field ="ID" dataType ="number" />
<IgrColumn field ="Name" dataType ="string" />
<IgrColumn field ="Age" dataType ="number" />
<IgrColumn field ="Title" dataType ="string" />
<IgrColumn field ="HireDate" dataType ="date" />
</IgrTreeGrid >
<IgrGrid ref ={rightGridRef} id ="rightGrid" autoGenerate ="false" width ="50%" height ="100%" >
<IgrColumn field ="ID" dataType ="number" />
<IgrColumn field ="Name" dataType ="string" />
<IgrColumn field ="Age" dataType ="number" />
<IgrColumn field ="Title" dataType ="string" />
<IgrColumn field ="HireDate" dataType ="date" />
</IgrGrid >
</div >
</div >
);
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<App /> );
tsx コピー
Tree Grid Single Selection
When you set the cellSelection
to single , this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.
When single cell is selected selected
event is emitted, no matter if the selection mode is single or multiple . In multi-cell selection mode when you select a range of cells RangeSelected
event is emitted.
Tree Grid None Selection
If you want to disable cell selection you can just set cellSelection
to none . In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected , only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.
Keyboard Navigation Interactions
While Shift Key is Pressed
Shift + ↑ to add above cell to the current selection.
Shift + ↓ to add below cell to the current selection.
Shift + ← to add left cell to the current selection.
Shift + → to add right cell to the current selection.
While Ctrl + Shift Keys are Pressed
Ctrl + Shift + ↑ to select all cells above the focused cell in the column.
Ctrl + Shift + ↓ to select all cells below the focused cell in the column.
Ctrl + Shift + ← to select all cells till the start of the row.
Ctrl + Shift + → to select all cells till the end of the row.
Ctrl + Shift + Home to select all cells from the focused cell till the first-most cell in the grid
Ctrl + Shift + End to select all cells from the focused cell till the last-most cell in the grid
Continuous scroll is possible only within Grid's body.
Api Usage
Below are the methods that you can use in order to select ranges, clear selection or get selected cells data.
Select range
selectRange
- Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.
const range = { rowStart: 2 , rowEnd: 2 , columnStart: 1 , columnEnd: 1 };
gridRef.current.selectRange(range);
tsx
Clear cell selection
clearCellSelection
will clear the current cell selection.
gridRef.current.clearCellSelection();
tsx
Get Selected Data
getSelectedData
will return array of the selected data in format depending on the selection. Examples below:
If three different single cells are selected:
expectedData = [
{ CompanyName : 'Infragistics' },
{ Name : 'Michael Langdon' },
{ ParentID : 147 }
];
typescript
If three cells from one column are selected:
expectedData = [
{ Address : 'Obere Str. 57' },
{ Address : 'Avda. de la Constitución 2222' },
{ Address : 'Mataderos 2312' }
];
typescript
If three cells are selected with mouse drag from one row and three columns:
expectedData = [
{ Address : 'Avda. de la Constitución 2222' , City : 'México D.F.' , ContactTitle : 'Owner' }
];
typescript
If three cells are selected with mouse drag from two rows and three columns:
expectedData = [
{ ContactTitle : 'Sales Agent' , Address : 'Cerrito 333' , City : 'Buenos Aires' },
{ ContactTitle : 'Marketing Manager' , Address : 'Sierras de Granada 9993' , City : 'México D.F.' }
];
typescript
If two different ranges are selected:
expectedData = [
{ ContactName : 'Martín Sommer' , ContactTitle : 'Owner' },
{ ContactName : 'Laurence Lebihan' , ContactTitle : 'Owner' },
{ Address : '23 Tsawassen Blvd.' , City : 'Tsawassen' },
{ Address : 'Fauntleroy Circus' , City : 'London' }
];
typescript
If two overlapping ranges are selected, the format would be:
expectedData = [
{ ContactName : 'Diego Roel' , ContactTitle : 'Accounting Manager' , Address : 'C/ Moralzarzal, 86' },
{ ContactName : 'Martine Rancé' , ContactTitle : 'Assistant Sales Agent' , Address : '184, chaussée de Tournai' , City : 'Lille' },
{ ContactName : 'Maria Larsson' , ContactTitle : 'Owner' , Address : 'Åkergatan 24' , City : 'Bräcke' },
{ ContactTitle : 'Marketing Manager' , Address : 'Berliner Platz 43' , City : 'München' }
];
typescript
Features Integration
The multi-cell selection is index based (DOM elements selection).
Sorting
- When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
Paging
- On paging selected cells will be cleared. Selection wont be persisted across pages.
Filtering
- When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
Resizing
- On column resizing selected cells will not be cleared.
Hiding
- It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
pinning
- Selected cell will not be cleared. Same as hiding
GroupBy
- On column grouping selected cells will not be cleared.
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:
<IgrTreeGrid className ="treeGrid" > </IgrTreeGrid >
tsx
Then set the related CSS properties for that class:
.treeGrid {
--ig-grid-cell-selected-text-color : #fff ;
--ig-grid-cell-active-border-color : #f2c43c ;
--ig-grid-cell-selected-background : #0062a3 ;
--ig-grid-cell-editing-background : #0062a3 ;
}
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 ));
}
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private grid: IgrTreeGrid
private gridRef(r: IgrTreeGrid) {
this .grid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .gridRef = this .gridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ="false"
ref ={this.gridRef}
id ="grid"
data ={this.ordersTreeData}
primaryKey ="ID"
foreignKey ="ParentID" >
<IgrColumn
field ="ID"
header ="Order ID"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="Name"
dataType ="String"
header ="Order Product" >
</IgrColumn >
<IgrColumn
field ="Units"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="UnitPrice"
header ="Unit Price"
dataType ="Currency" >
</IgrColumn >
<IgrColumn
field ="Price"
header ="Price"
dataType ="Currency" >
</IgrColumn >
<IgrColumn
field ="OrderDate"
header ="Order Date"
dataType ="Date" >
</IgrColumn >
</IgrTreeGrid >
</div >
</div >
);
}
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;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
#grid {
--cell-selected-text-color : #FFFFFF ;
--cell-active-border-color : #f2c43c ;
--cell-selected-background : #0062a3 ;
}
css コピー
API References
Additional Resources
Our community is active and always welcoming to new ideas.