React Hierarchical Grid Selection Overview
With the Ignite UI for React Select feature in React Hierarchical Grid you can easily interact with and manipulate data using simple mouse interactions. There are three selection modes available:
Row selection
Cell selection
Column selection
With the rowSelection
property, you can specify:
None
Single
Multiple Select
React Hierarchical Grid Selection Example
The sample below demonstrates three types of cell selection behaviors in the IgrHierarchicalGrid
. Use the buttons below to enable each of the available selection modes.
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import SingersData from './SingersData.json' ;
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts" ;
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,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private propertyEditorHierarchicalGrid: IgrPropertyEditorPanel
private propertyEditorHierarchicalGridRef(r: IgrPropertyEditorPanel) {
this .propertyEditorHierarchicalGrid = r;
this .setState({});
}
private cellSelectionEditorHierarchicalGrid: IgrPropertyEditorPropertyDescription
private cellSelectionEditorRowIsland: IgrPropertyEditorPropertyDescription
private hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this .hierarchicalGrid = r;
this .setState({});
}
private rowIsland: IgrRowIsland
constructor (props: any ) {
super (props);
this .propertyEditorHierarchicalGridRef = this .propertyEditorHierarchicalGridRef.bind(this );
this .webRowIslandCellSelectionChange = this .webRowIslandCellSelectionChange.bind(this );
this .hierarchicalGridRef = this .hierarchicalGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
ref ={this.propertyEditorHierarchicalGridRef}
componentRenderer ={this.renderer}
target ={this.hierarchicalGrid}
descriptionType ="WebHierarchicalGrid"
isHorizontal ="true"
isWrappingEnabled ="true" >
<IgrPropertyEditorPropertyDescription
label ="Hierarchical Grid Cell Selection"
propertyPath ="CellSelection"
name ="CellSelectionEditorHierarchicalGrid"
valueType ="EnumValue" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
label ="Row Island Cell Selection"
propertyPath =""
name ="CellSelectionEditorRowIsland"
valueType ="EnumValue"
dropDownNames ={[ "None ", "Single ", "Multiple ", "MultipleCascade "]}
dropDownValues ={[ "None ", "Single ", "Multiple ", "MultipleCascade "]}
changed ={this.webRowIslandCellSelectionChange} >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
id ="hierarchicalGrid"
ref ={this.hierarchicalGridRef} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="HasGrammyAward"
header ="Has Grammy Award"
dataType ="Boolean" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="Number"
hasSummary ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="Number"
hasSummary ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false"
name ="rowIsland" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public webRowIslandCellSelectionChange(sender: any , args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
this .hierarchicalGrid.contentChildLayoutList[0 ].cellSelection = args.newValue.toLocaleLowerCase();
}
}
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.
React Hierarchical Grid Selection Options
The Ignite UI for React IgrHierarchicalGrid
component provides three different selection modes - Row selection , Cell selection and Column selection . By default only Multi-cell selection mode is enabled in the IgrHierarchicalGrid
. In order to change/enable selection mode you can use rowSelection
, cellSelection
or selectable
properties.
React Hierarchical Grid Row Selection
Property rowSelection
enables you to specify the following options:
None
- Row selection would be disabled for the IgrHierarchicalGrid
.
Single
- Selection of only one row within the IgrHierarchicalGrid
would be available.
Multiple
- Multi-row selection would be available by using the row selectors, with a key combination like ctrl + click , or by pressing the space key once a cell is focused.
MultipleCascade
- This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent's selection state entirely depends on the selection state of its children.
Go to Row selection topic for more information.
React Hierarchical Grid Cell Selection
Property cellSelection
enables you to specify the following options:
None
- Cell selection would be disabled for the IgrHierarchicalGrid
.
Single
- Selection of only one cell within the IgrHierarchicalGrid
would be available.
Multiple
- Currently, this is the default state of the selection in the IgrHierarchicalGrid
. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.
Go to Cell selection topic for more information.
React Hierarchical Grid Column Selection
The selectable
property enables you to specify the following options for each IgrColumn
. The corresponding column selection will be enabled or disabled if this property is set to true or false, respectively.
This leads to the following three variations:
Single selection - mouse click over the column cell.
Multi column selection - holding ctrl + mouse click over the column cells.
Range column selection - holding shift + mouse click selects everything in between.
Go to Column selection topic for more information.
Known Issues and Limitations
When the grid has no primaryKey
set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
Row Selection
Row Expand/collapse
Row Editing
Row Pinning
API References
Additional Resources
Our community is active and always welcoming to new ideas.