React Tree Grid 行の選択
React Tree Grid の Ignite UI for React 行選択機能を使用すると、ユーザーは 1 つまたは複数のデータ行を対話的に選択、ハイライト表示、または選択解除できます。IgrTreeGrid
内に使用可能な選択モードがいくつかあります。
None (なし) 選択
Multiple (複数) 選択
Single (単一) 選択
React 行選択の例
以下のサンプルは、IgrTreeGrid
の 4 種類の行選択 動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。スイッチ ボタンを使用して、行セレクター チェックボックスを非表示または表示します。
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 { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, WebTreeGridDescriptionModule, PropertyEditorPanelDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData' ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrTreeGridModule,
IgrPropertyEditorPanelModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private propertyEditorPanel1: IgrPropertyEditorPanel
private propertyEditorPanel1Ref(r: IgrPropertyEditorPanel) {
this .propertyEditorPanel1 = r;
this .setState({});
}
private selectionType: IgrPropertyEditorPropertyDescription
private hideRowSelectors: IgrPropertyEditorPropertyDescription
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .propertyEditorPanel1Ref = this .propertyEditorPanel1Ref.bind(this );
this .treeGridRef = this .treeGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
target ={this.treeGrid}
descriptionType ="WebTreeGrid"
isWrappingEnabled ="true"
isHorizontal ="true"
componentRenderer ={this.renderer}
ref ={this.propertyEditorPanel1Ref} >
<IgrPropertyEditorPropertyDescription
name ="selectionType"
propertyPath ="RowSelection"
label ="Row Selection" >
</IgrPropertyEditorPropertyDescription >
<IgrPropertyEditorPropertyDescription
name ="hideRowSelectors"
propertyPath ="HideRowSelectors"
label ="Hide Row Selectors" >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ={false}
ref ={this.treeGridRef}
id ="treeGrid"
data ={this.employeesFlatData}
primaryKey ="ID"
foreignKey ="ParentID"
cellSelection ="none"
allowFiltering ={true}
hideRowSelectors ={false} >
<IgrColumn
field ="Name"
dataType ="string"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Job Title"
dataType ="string"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="HireDate"
dataType ="date"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="ID"
dataType ="number"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="Age"
dataType ="number"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="OnPTO"
dataType ="boolean"
sortable ={true} >
</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;
WebTreeGridDescriptionModule.register(context);
PropertyEditorPanelDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
設定
IgrTreeGrid
で項目の選択を設定するには、その rowSelection
プロパティを設定する必要があります。このプロパティは、GridSelectionMode
列挙を受け取ります。
GridSelectionMode
は以下のモードを公開します。
None (なし)
Single (単一)
Multiple (複数)
以下で、それぞれについて詳しく説明します。
None 選択
IgrTreeGrid
では、デフォルトで行選択が無効になります。(rowSelection
は None です。)したがって、IgrTreeGrid
UI とのインタラクションを通じて行を選択または選択解除することはできません が、選択/選択解除する唯一の方法は、提供された API メソッドを使用することです。
単一選択
単一行の選択は、rowSelection
プロパティ を Single
に設定することのみで簡単に設定できるようになりました。これにより、グリッド内の 1 行のみを選択できます 。行のセルにフォーカスするときにセルをクリックするかスペース キーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、RowSelectionChanging
イベントが生成されます。
const handleRowSelection = (args: IgrRowSelectionEventArgs) => {
if (args.detail.added.length && args.detail.added[0 ] === 3 ) {
args.detail.cancel = true ;
}
}
<IgrTreeGrid rowSelection ="single" autoGenerate ={true} allowFiltering ={true} onRowSelectionChanging ={handleRowSelection} >
</IgrTreeGrid >
tsx
複数選択
IgrTreeGrid
で複数の項目を選択できるようにするには、rowSelection
プロパティを Multiple
に設定するだけです。これにより、各行および IgrTreeGrid
ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用して複数行を選択できます。選択はスクロール、ページング、およびソートとフィルター、などのデータ操作で保持されます。行を選択するには、セルをクリックするか、セルにフォーカスがあるときにスペース キーを押します。1 つの行を選択し、Shift キーを押しながら別の行をクリックすると、行の範囲全体が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。Ctrl キーを押しながらクリックすると、行が切り替わり、前の選択が保持されます。
<IgrTreeGrid primaryKey ="ProductID" rowSelection ="multiple"
allowFiltering ={true} autoGenerate ={true} >
</IgrTreeGrid >
tsx
カスケード選択
IgrTreeGrid
で複数の項目を選択できるようにするには、rowSelection
プロパティを MultipleCascade
に設定するだけです。これにより、各行および IgrTreeGrid
ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用すると、ユーザーは複数の行を選択して、下のツリーのすべての子を選択できます。選択は、スクロール、ページング、およびソートやフィルタリングなどのデータ操作を通じて保持されます。行は、セルをクリックするか、セルがフォーカスされているときにスペース キーを押すことによっても選択できます。1 つの行を選択し、Shift キーを押しながら別の行をクリックすると、親レコードの選択を通じて選択した範囲内にない場合でも、そのすべての子が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。Ctrl キーを押しながらクリックすると、行とその子が切り替えられ、前の選択が保持されます。
<IgrTreeGrid primaryKey ="ID" foreignKey ="ParentID" autoGenerate ={true}
rowSelection ="multipleCascade" allowFiltering ={true} >
</IgrTreeGrid >
tsx
このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。
注
行を選択すると、RowSelectionChanging
イベントがトリガーされます。このイベントは、新しい選択、古い選択、古い選択に対して追加および削除された行に関する情報を提供します。また、イベントはキャンセル可能であるため、選択を防ぐことができます。
行選択が有効になっている場合、行セレクターが表示されますが、表示しない場合は、hideRowSelectors
を true に設定できます。
行選択モードのランタイムを切り替えると、優先行選択状態がクリアされます。
API の使用
コードで行を選択
以下は、単一または複数の行を同時に選択できるコード例です (primaryKey
を介して)。さらに、このメソッドの 2 番目のパラメーターは boolean プロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。
function onClickSelect() {
gridRef.current.selectRows([1 ,2 ,5 ], true );
}
<IgrTreeGrid primaryKey ="ProductID" rowSelection ="multiple" autoGenerate ={true} ref ={gridRef} >
</IgrTreeGrid >
<button onClick ={onClickSelect} > Select 1 ,2 and 5 </button >
tsx
1、2、および 5 の ID を持つデータ エントリに対応する行を IgrTreeGrid
の選択に追加します。
行選択の解除
プログラムで行を選択解除する必要がある場合は、deselectRows
メソッドを使用できます。
function onClickDeselect() {
gridRef.current.deselectRows([1 ,2 ,5 ]);
}
<IgrTreeGrid primaryKey ="ProductID" rowSelection ="multiple" autoGenerate ={true} ref ={gridRef} >
</IgrTreeGrid >
<button onClick ={onClickDeselect} > Deselect 1 ,2 and 5 </button >
tsx
行選択イベント
行選択に何らかの変更があると、RowSelectionChanging
イベントが発生します。RowSelectionChanging
は次の引数を公開します。
OldSelection
- 行選択の前の状態を含む行 ID の配列。
NewSelection
- 行選択の新しい状態に一致する行 ID の列。
Added
- 現在選択に追加されている行 ID の配列。
Removed
- 古い選択状態に従って現在削除されている行 ID の配列。
Event
- 行選択の変更をトリガーする元のイベント。
Cancel
- 行選択の変更を防ぐことができます。
const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
args.detail.cancel = true ;
}
<IgrTreeGrid onRowSelectionChanging ={handleRowSelectionChange} >
</IgrTreeGrid >
tsx
すべての行の選択
IgrTreeGrid
が提供するもう 1 つの便利な API メソッドが selectAllRows
です。このメソッドはデフォルトですべてのデータ行を選択しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみが選択されます。ただし、false パラメーターを指定してメソッドを呼び出すと、SelectAllRows(false)
は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータを選択します。
注: selectAllRows
は削除された行を選択しないことに注意してください。
全行の選択解除
IgrTreeGrid
は、デフォルトですべてのデータ行の選択を解除する deselectAllRows
メソッドを提供しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみを選択解除します。ただし、false パラメーターを指定してメソッドを呼び出すと、DeselectAllRows(false)
は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータをクリアします。
選択した行を取得する方法
現在選択されている行を確認する必要がある場合は、selectedRows
ゲッターを使用して行 ID を取得できます。
function getSelectedRows() {
return gridRef.current.selectedRows;
}
tsx
さらに、selectedRows
に行 ID を割り当てると、グリッドの選択状態を変更できます。
const mySelectedRows = [1 ,2 ,3 ];
<IgrTreeGrid primaryKey ="ProductID" rowSelection ="multiple" autoGenerate ={false} selectedRows ={mySelectedRows} >
</IgrTreeGrid >
tsx
行セレクターのテンプレート
IgrTreeGrid
でヘッダーおよび行セレクターをテンプレート化し、さまざまなシナリオに役立つ機能を提供するコンテキストにアクセスすることもできます。
デフォルトでは、IgrTreeGrid
は、行セレクターの親コンテナまたは行自体のすべての行選択操作を処理し 、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、RowSelectionChanging イベント を使用して実行する必要があります。基本機能をオーバーライドする click
ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。
行テンプレート
カスタム行セレクター テンプレートを作成するには、IgrTreeGrid
内で rowSelectorTemplate
プロパティを使用できます。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
selected
プロパティは現在の行が選択されているかどうかを示し、index
プロパティは行インデックスにアクセスするために使用できます。
const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
if (ctx.implicit.selected) {
return (
<>
<div style ={{justifyContent: 'space-evenly ', display: 'flex ', width: '70px '}}>
<span > ${ctx.implicit.index}</span >
<IgrCheckbox checked > </IgrCheckbox >
</div >
</>
);
} else {
return (
<>
<div style ={{justifyContent: 'space-evenly ', display: 'flex ', width: '70px '}}>
<span > ${ctx.implicit.index}</span >
<IgrCheckbox > </IgrCheckbox >
</div >
</>
);
}
}
<IgrTreeGrid primaryKey ="ProductID" rowSelection ="multiple" autoGenerate ="false" rowSelectorTemplate ={rowSelectorTemplate} >
</IgrTreeGrid >
tsx
rowID
プロパティを使用して、IgrTreeGrid
行の参照を取得できます。行セレクター要素に click
ハンドラーを実装する場合に便利です。
const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
return (
<>
<IgrCheckbox onClick ={(event) => onSelectorClick(event, ctx.implicit.key)}>
</IgrCheckbox >
</>
);
}
tsx
上の例では、IgrCheckbox
を使用しており、rowContext.selected
をその checked
プロパティにバインドしています。行番号のデモ で実際にこれをご覧ください。
ヘッダー テンプレート
カスタム行ヘッダー セレクター テンプレートを作成するには、IgrTreeGrid
内で headSelectorTemplate
プロパティを使用します。テンプレートから、ヘッダーの状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
selectedCount
プロパティは現在選択されている行数を示し、totalCount
は IgrTreeGrid
に合計の行数を示します。
const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
return (
<>
{ctx.implicit.selectedCount} / {ctx.implicit.totalCount}
</>
);
};
tsx
selectedCount
および totalCount
プロパティを使用して、ヘッド セレクターをチェックするか、不確定にする(部分的に選択する)かを決定できます。
const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
const implicit : any = ctx.implicit;
if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
return (
<>
<IgrCheckbox checked > </IgrCheckbox >
</>
);
} else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
return (
<>
<IgrCheckbox indeterminate > </IgrCheckbox >
</>
);
}
return (
<>
<IgrCheckbox > </IgrCheckbox >
</>
);
}
<IgrTreeGrid primaryKey ="ProductID" rowSelection ="multiple" autoGenerate ={true} headSelectorTemplate ={headSelectorTemplate} >
</IgrTreeGrid >
tsx
行の番号付けデモ
このデモでは、カスタム ヘッダーと行セレクターの使用方法を示します。後者は、index
を使用して行番号と、selected
にバインドされた IgrCheckbox
を表示します。
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 { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData' ;
import { IgrRowSelectorTemplateContext, IgrHeadSelectorTemplateContext } from "@infragistics/igniteui-react-grids" ;
import { IgrCheckbox } from "@infragistics/igniteui-react" ;
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 treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .treeGridRef = this .treeGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ={false}
ref ={this.treeGridRef}
id ="treeGrid"
data ={this.employeesFlatData}
primaryKey ="ID"
foreignKey ="ParentID"
rowSelection ="multiple"
rowSelectorTemplate ={this.webGridRowSelectorTemplate}
headSelectorTemplate ={this.webGridHeaderRowSelectorTemplate}
cellSelection ="none"
hideRowSelectors ={false} >
<IgrColumn
field ="Name"
dataType ="string" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Job Title" >
</IgrColumn >
<IgrColumn
field ="HireDate"
dataType ="date" >
</IgrColumn >
<IgrColumn
field ="Age"
dataType ="number" >
</IgrColumn >
<IgrColumn
field ="OnPTO"
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;
}
public webGridRowSelectorTemplate = (e: {dataContext: IgrRowSelectorTemplateContext}) => {
const contextDetail = e.dataContext.implicit;
const containerStyle = {
justifyContent: 'space-evenly' ,
display: 'flex' ,
width: '70px'
};
return (
<div style ={containerStyle} >
<span > {contextDetail.index}</span >
<IgrCheckbox checked ={contextDetail.selected} key ={ `${contextDetail.selected }`}> </IgrCheckbox >
</div >
);
}
public webGridHeaderRowSelectorTemplate = (e: {dataContext: IgrHeadSelectorTemplateContext }) => {
return (
<div style ={{width: '70px ', height: '60px ', display: 'flex '}}>
<img src ="https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png" className ="header-image" />
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Excel スタイル行セレクターのデモ
このデモは、カスタム テンプレートを使用して Excel ライクなヘッダーおよび行セレクターを示します。
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 { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrTreeGrid, IgrPaginator, IgrPaginatorResourceStrings, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData' ;
import { IgrRowSelectorTemplateContext, IgrHeadSelectorTemplateContext } from "@infragistics/igniteui-react-grids" ;
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 treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
private paginator: IgrPaginator
private _paginatorResourceStrings1: IgrPaginatorResourceStrings | null = null ;
public get paginatorResourceStrings1(): IgrPaginatorResourceStrings {
if (this ._paginatorResourceStrings1 == null )
{
var paginatorResourceStrings1: IgrPaginatorResourceStrings = {} as IgrPaginatorResourceStrings;
paginatorResourceStrings1.igx_paginator_label = "Items per page" ;
this ._paginatorResourceStrings1 = paginatorResourceStrings1;
}
return this ._paginatorResourceStrings1;
}
constructor (props: any ) {
super (props);
this .treeGridRef = this .treeGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ={false}
data ={this.employeesFlatData}
ref ={this.treeGridRef}
id ="treeGrid"
primaryKey ="ID"
foreignKey ="ParentID"
rowSelection ="multiple"
rowSelectorTemplate ={this.webGridRowSelectorExcelTemplate}
headSelectorTemplate ={this.webGridHeaderRowSelectorExcelTemplate} >
<IgrPaginator
perPage ={15}
selectOptions ={[5, 10 , 15 , 25 , 50 ]}
resourceStrings ={this.paginatorResourceStrings1} >
</IgrPaginator >
<IgrColumn
field ="Name"
dataType ="string"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Job Title"
dataType ="string"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="HireDate"
dataType ="date"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="ID"
dataType ="number"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="Age"
dataType ="number"
sortable ={true} >
</IgrColumn >
<IgrColumn
field ="OnPTO"
dataType ="boolean"
sortable ={true} >
</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;
WebTreeGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public webGridRowSelectorExcelTemplate = (e : { dataContext: IgrRowSelectorTemplateContext}) => {
return <> <span style ={{display: "block ", width: "30px "}}> {e.dataContext.implicit.index}</span > </> ;
}
public webGridHeaderRowSelectorExcelTemplate = (e: { dataContext: IgrHeadSelectorTemplateContext }) => {
const ctx = e.dataContext;
if (ctx.implicit.selectedCount > 0 && ctx.implicit.selectedCount === ctx.implicit.totalCount) {
return <> <span style ={{display: "block ", width: "30px "}}> <i style ={{color: "rgb (239 , 184 , 209 )"}}> ◢</i > </span > </> ;
} else {
return <> <span style ={{display: "block ", width: "30px "}}> <i > ◢</i > </span > </> ;
}
};
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
#treeGrid {
--ig-size: var (--ig-size-medium);
}
css コピー
条件付き選択のデモ
このデモでは、RowSelectionChanging
イベントと、選択できない行のチェックボックスが無効になっているカスタム テンプレートを使用して、一部の行が選択されないようにします。
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 { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData' ;
import { IgrRowSelectionEventArgs, IgrGrid } from "@infragistics/igniteui-react-grids" ;
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 treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .treeGridRef = this .treeGridRef.bind(this );
this .webTreeGridRowSelectionConditional = this .webTreeGridRowSelectionConditional.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ={false}
data ={this.employeesFlatData}
ref ={this.treeGridRef}
id ="treeGrid"
primaryKey ="ID"
foreignKey ="ParentID"
rowSelection ="multiple"
onRowSelectionChanging ={this.webTreeGridRowSelectionConditional} >
<IgrColumn
field ="Name"
dataType ="string" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Job Title" >
</IgrColumn >
<IgrColumn
field ="HireDate"
dataType ="date" >
</IgrColumn >
<IgrColumn
field ="Age"
dataType ="number" >
</IgrColumn >
<IgrColumn
field ="OnPTO"
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;
WebTreeGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public webTreeGridRowSelectionConditional(eventArgs: IgrRowSelectionEventArgs): void {
const event = eventArgs.detail;
if (!event.added.length && event.removed.length) {
return ;
}
var grid = this .treeGrid;
const originalAddedLength = event.added.length;
event.newSelection = event.newSelection.filter(x => x.OnPTO === true );
if (event.newSelection.length
&& !event.newSelection.filter((x: any ) => event.oldSelection.indexOf(x) === -1 ).length
&& originalAddedLength > 1 ) {
event.newSelection = [];
}
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。