React Hierarchical Grid セルの選択
React Hierarchical Grid の Ignite UI for React セル選択により、豊富なデータ選択機能が有効になり、IgrHierarchicalGrid
コンポーネントで強力な API が提供されます。 React Hierarchical Grid は、次の 3 つの選択モードをサポートしています。
- Hierarchical Grid 複数セルの選択
- Hierarchical Grid 単一選択
- Hierarchical Grid 選択なし
IgrHierarchicalGrid
では、グリッド レベルでセル選択モードを指定できます。たとえば、親グリッドではマルチセル選択を有効にできますが、子グリッドではセル選択モードを単一または無効にすることができます。
これらの各オプションについて詳しく説明します。
React セル選択の例
以下のサンプルは、IgrHierarchicalGrid
の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。
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/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}>
<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 {
const rowIsland = document.getElementsByTagName("igc-row-island")[0] as IgrRowIsland;
rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
選択タイプ
React Hierarchical Grid 複数セルの選択
これは、親グリッドと子グリッドの両方でのデフォルトのセル選択モードです。セルの選択は一度に 1 つのグリッドで行うことができますが、クロス グリッド範囲の選択を行うことか、複数のグリッドでセルを選択することはできないことに注意してください。範囲選択およびマウス ドラッグ機能に関連する各キーの組み合わせは、同じグリッドでのみ使用できます。
セルの選択方法:
- マウス ドラッグ - セルの長方形データ選択。
- Ctrl キー押下 + マウス ドラッグ - 複数の範囲が選択されます。その他の既存のセル選択は保持されます。
- Shift キーを使用して複数セルの選択をインスタンス化します。Shift キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。Shift キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
- Shift キーを押しながら 矢印 キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
- Ctrl キーを押しながら Ctrl + ↑ ↓ ← → キーと Ctrl + Home / End を使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
- Ctrl キーを押しながら左マウス キーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
- マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。
Hierarchical Grid 単一選択
cellSelection
を single (単一) に設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、マウス ドラッグ モードは機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。
選択モードが single (単一) であるか multiple (複数) であるかに関係なく、単一セルが selected
イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると RangeSelected
イベントが発生します。
Hierarchical Grid 選択なし
セルの選択を無効にする場合は、cellSelection
を none (なし) に設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは選択されず、アクティブ化のスタイルのみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。
キーボード ナビゲーションのインタラクション
Shift キーが押されている間
- Shift + ↑ - 現在の選択範囲に上のセルを追加します。
- Shift + ↓ - 現在の選択範囲に下のセルを追加します。
- Shift + ← - 現在の選択に左のセルを追加します。
- Shift + → - 現在の選択範囲に右のセルを追加します。
Ctrl + Shift キーが押されている間
- Ctrl + Shift + ↑ - 列内のフォーカスのあるセルの上にあるすべてのセルを選択します。
- Ctrl + Shift + ↓ - 列内のフォーカスのあるセルの下にあるすべてのセルを選択します。
- Ctrl + Shift + ← - 行の先頭まですべてのセルを選択します。
- Ctrl + Shift + → - 行末まですべてのセルを選択します。
- Ctrl + Shift + Home - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。
- Ctrl + Shift + End - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。
API の使用
以下は、範囲の選択、選択の解除、または選択したセル データを取得する方法です。
範囲の選択
selectRange
- API を使用してセル範囲を選択します。rowStart と rowEnd は行インデックスを使用する必要があり、columnStart と columnEnd は列インデックスまたは列データ フィールド値を使用することができます。
const range: IgrGridSelectionRange[] = [{ rowStart: 2, rowEnd: 2, columnStart: "ProductName", columnEnd: "UnitsInStock" }];
gridRef.current.selectRange(range)
tsx
セル選択のクリア
clearCellSelection
は現在のセル選択をクリアします。
gridRef.current.clearCellSelection();
tsx
選択したデータの取得
getSelectedData
は、選択したデータの配列を選択内容に応じた形式で返します。例:
expectedData = [
{ CompanyName: 'Infragistics' },
{ Name: 'Michael Langdon' },
{ ParentID: 147 }
];
typescript
expectedData = [
{ Address: 'Obere Str. 57'},
{ Address: 'Avda. de la Constitución 2222'},
{ Address: 'Mataderos 2312'}
];
typescript
- 1 行 3 列から 3 つのセルをマウスドラッグで選択した場合:
expectedData = [
{ Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
typescript
- 2 行 3 列から 3 つのセルをマウスドラッグで選択した場合:
expectedData = [
{ ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
{ ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
typescript
expectedData = [
{ ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
{ ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
{ Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
{ Address: 'Fauntleroy Circus', City: 'London'}
];
typescript
- 2 つの重複範囲が選択されている場合、形式は次のようになります。
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
機能の統合
マルチセル選択はインデックス ベースです (DOM 要素選択)。
Sorting
- ソートが実行されると、選択は解除されません。昇順または降順でソートしている間、現在選択されているセルはそのままになります。昇順または降順でソートしている間、現在選択されているセルはそのままになります。
Paging
- ページング時に選択されたセルはクリアされます。選択はページを超えては持続されません。選択はページを超えては持続されません。
Filtering
- フィルタリングが実行されると、選択は解除されません。フィルタリングがクリアされている場合は、最初に選択されたセルが返されます。
Resizing
- 列のサイズを変更すると、選択したセルはクリアされません。
Hiding
- 選択したセルはクリアされません。列が非表示の場合は、次に表示されている列のセルが選択されます。
pinning
- 選択したセルはクリアされません。非表示と同じです。
GroupBy
- 列をグループ化すると、選択したセルはクリアされません。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。
一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgrHierarchicalGrid className="hGrid"></IgrHierarchicalGrid>
tsx
Then set the related CSS properties for that class:
.hGrid {
--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
デモ
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 "@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 propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this.propertyEditor = r;
this.setState({});
}
private cellSelectionEditor: IgrPropertyEditorPropertyDescription
private hGrid: IgrHierarchicalGrid
private hGridRef(r: IgrHierarchicalGrid) {
this.hGrid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.propertyEditorRef = this.propertyEditorRef.bind(this);
this.hGridRef = this.hGridRef.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.hGrid}
descriptionType="WebHierarchicalGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
propertyPath="CellSelection"
name="CellSelectionEditor"
valueType="EnumValue"
dropDownNames={["None", "Single", "Multiple"]}
dropDownValues={["None", "Single", "Multiple"]}>
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
</div>
<div className="container fill">
<IgrHierarchicalGrid
autoGenerate={false}
data={this.singersData}
id="hGrid"
ref={this.hGridRef}
primaryKey="ID">
<IgrColumn
field="Artist"
header="Artist"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Photo"
header="Photo"
dataType="image"
minWidth="115px"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Debut"
header="Debut"
dataType="number"
minWidth="88px"
maxWidth="230px"
resizable={true}>
</IgrColumn>
<IgrColumn
field="GrammyNominations"
header="Grammy Nominations"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="GrammyAwards"
header="Grammy Awards"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrRowIsland
childDataKey="Albums"
autoGenerate={false}>
<IgrColumn
field="Album"
header="Album"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="LaunchDate"
header="Launch Date"
dataType="date"
resizable={true}>
</IgrColumn>
<IgrColumn
field="BillboardReview"
header="Billboard Review"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="USBillboard200"
header="US Billboard 200"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrRowIsland
childDataKey="Songs"
autoGenerate={false}>
<IgrColumn
field="Number"
header="No."
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Title"
header="Title"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Released"
header="Released"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Genre"
header="Genre"
dataType="string"
resizable={true}>
</IgrColumn>
</IgrRowIsland>
</IgrRowIsland>
<IgrRowIsland
childDataKey="Tours"
autoGenerate={false}>
<IgrColumn
field="Tour"
header="Tour"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="StartedOn"
header="Started on"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Location"
header="Location"
dataType="string"
resizable={true}>
</IgrColumn>
<IgrColumn
field="Headliner"
header="Headliner"
dataType="string"
resizable={true}>
</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;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx
#hGrid {
--ig-grid-cell-selected-text-color: #FFFFFF;
--ig-grid-cell-active-border-color: #f2c43c;
--ig-grid-cell-selected-background: #0062a3;
}
css
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。