Web Components Tree Grid セルの選択

Web Components Tree Grid の Ignite UI for Web Components セル選択により、豊富なデータ選択機能が有効になり、IgcTreeGridComponent コンポーネントで強力な API が提供されます。 Web Components Tree Grid は、次の 3 つの選択モードをサポートしています。

• Tree Grid 複数セルの選択
• Tree Grid 単一選択
• Tree Grid 選択なし

これらの各オプションについて詳しく説明します。

Web Components セル選択の例

以下のサンプルは、IgcTreeGridComponent の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。

EXAMPLE

DATA

TS

HTML

CSS

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 { 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 { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
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 propertyEditor: IgcPropertyEditorPanelComponent
    private cellSelectionEditor: IgcPropertyEditorPropertyDescriptionComponent
    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditor = this.cellSelectionEditor = document.getElementById('CellSelectionEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.treeGrid;
            treeGrid.data = this.employeesFlatData;
        }
        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;
            PropertyEditorPanelDescriptionModule.register(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="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="WebTreeGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="CellSelection"
            name="CellSelectionEditor"
            id="CellSelectionEditor"
            label="Cell Selection"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple"
            drop-down-values="None, Single, Multiple">
            </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">
            </igc-column>
            <igc-column
            field="Name">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number">
            </igc-column>
            <igc-column
            field="Title">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date">
            </igc-column>
            <igc-column
            field="OnPTO"
            header="On PTO"
            data-type="boolean">
            </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コピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

選択タイプ

Web Components Tree Grid 複数セルの選択

セルの選択方法:

• マウス ドラッグ - セルの長方形データ選択。
• Ctrl キー押下 + マウス ドラッグ - 複数の範囲が選択されます。その他の既存のセル選択は保持されます。
• Shift キーを使用して複数セルの選択をインスタンス化します。Shift キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。Shift キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
• Shift キーを押しながら 矢印 キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
• Ctrl キーを押しながら Ctrl + ↑ ↓ ← → キーと Ctrl + Home / End を使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
• Ctrl キーを押しながら左マウス キーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
• マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。

デモ

EXAMPLE

DATA

TS

HTML

CSS

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;
    public hasEmployees: boolean;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor() {
        super();
        this.push(new EmployeesFlatDataItem(
        {
            Age: 55,
            HireDate: `2008, 3, 20`,
            ID: 1,
            Name: `Johnathan Winchester`,
            Phone: `0251-031259`,
            OnPTO: false,
            ParentID: -1,
            Title: `Development Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 42,
            HireDate: `2014, 1, 22`,
            ID: 4,
            Name: `Ana Sanders`,
            Phone: `(21) 555-0091`,
            OnPTO: true,
            ParentID: -1,
            Title: `CEO`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 49,
            HireDate: `2014, 1, 22`,
            ID: 18,
            Name: `Victoria Lincoln`,
            Phone: `(071) 23 67 22 20`,
            OnPTO: true,
            ParentID: -1,
            Title: `Accounting Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 61,
            HireDate: `2010, 1, 1`,
            ID: 10,
            Name: `Yang Wang`,
            Phone: `(21) 555-0091`,
            OnPTO: false,
            ParentID: -1,
            Title: `Localization Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 43,
            HireDate: `2011, 6, 3`,
            ID: 3,
            Name: `Michael Burke`,
            Phone: `0452-076545`,
            OnPTO: true,
            ParentID: 1,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 29,
            HireDate: `2009, 6, 19`,
            ID: 2,
            Name: `Thomas Anderson`,
            Phone: `(14) 555-8122`,
            OnPTO: false,
            ParentID: 1,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 31,
            HireDate: `2014, 8, 18`,
            ID: 11,
            Name: `Monica Reyes`,
            Phone: `7675-3425`,
            OnPTO: false,
            ParentID: 1,
            Title: `Software Development Team Lead`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 35,
            HireDate: `2015, 9, 17`,
            ID: 6,
            Name: `Roland Mendel`,
            Phone: `(505) 555-5939`,
            OnPTO: false,
            ParentID: 11,
            Title: `Senior Software Developer`
        }));
        this.push(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`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2014, 4, 4`,
            ID: 14,
            Name: `Laurence Johnson`,
            Phone: `981-443655`,
            OnPTO: false,
            ParentID: 4,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2017, 11, 9`,
            ID: 5,
            Name: `Elizabeth Richards`,
            Phone: `(2) 283-2951`,
            OnPTO: true,
            ParentID: 4,
            Title: `Vice President`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 39,
            HireDate: `2010, 3, 22`,
            ID: 13,
            Name: `Trevor Ashworth`,
            Phone: `981-443655`,
            OnPTO: true,
            ParentID: 5,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2014, 4, 4`,
            ID: 17,
            Name: `Antonio Moreno`,
            Phone: `(505) 555-5939`,
            OnPTO: false,
            ParentID: 18,
            Title: `Senior Accountant`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 50,
            HireDate: `2007, 11, 18`,
            ID: 7,
            Name: `Pedro Rodriguez`,
            Phone: `035-640230`,
            OnPTO: false,
            ParentID: 10,
            Title: `Senior Localization Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 27,
            HireDate: `2016, 2, 19`,
            ID: 8,
            Name: `Casey Harper`,
            Phone: `0342-023176`,
            OnPTO: true,
            ParentID: 10,
            Title: `Senior Localization`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2017, 11, 9`,
            ID: 15,
            Name: `Patricia Simpson`,
            Phone: `069-0245984`,
            OnPTO: false,
            ParentID: 7,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 39,
            HireDate: `2010, 3, 22`,
            ID: 9,
            Name: `Francisco Chang`,
            Phone: `(91) 745 6200`,
            OnPTO: false,
            ParentID: 7,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2018, 3, 18`,
            ID: 16,
            Name: `Peter Lewis`,
            Phone: `069-0245984`,
            OnPTO: true,
            ParentID: 7,
            Title: `Localization Intern`
        }));
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";

export class Sample {
    private leftTreeGrid: IgcTreeGridComponent;
    private rightGrid: IgcGridComponent;

    private leftTreeGridData: EmployeesFlatData;

    private _bind: () => void;

    constructor() {
        var leftTreeGrid = this.leftTreeGrid = document.getElementById("leftTreeGrid") as IgcTreeGridComponent;
        var rightGrid = this.rightGrid = document.getElementById("rightGrid") as IgcGridComponent;

        this.onTreeGridRangeSelected = this.onTreeGridRangeSelected.bind(this);

        this.leftTreeGridData = new EmployeesFlatData();

        this._bind = () => {
            leftTreeGrid.data = this.leftTreeGridData;
            leftTreeGrid.addEventListener("rangeSelected", this.onTreeGridRangeSelected);
        };
        this._bind();
    }

    public onTreeGridRangeSelected(): void {
        this.rightGrid.data = this.leftTreeGrid.getSelectedData();
    }
}

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 horizontal">
                    <igc-tree-grid auto-generate="false" id="leftTreeGrid" name="leftTreeGrid" primary-key="ID" foreign-key="ParentID" cellSelection="multiple">
                        <igc-column field="ID" data-type="number"></igc-column>
                        <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"></igc-column>
                        <igc-column field="HireDate" data-type="date"></igc-column>
                    </igc-tree-grid>
                    <igc-grid auto-generate="false" id="rightGrid" name="rightGrid">
                        <igc-column field="ID" data-type="number"></igc-column>
                        <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"></igc-column>
                        <igc-column field="HireDate" data-type="date"></igc-column>
                    </igc-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コピー

Edit in: Codesandbox

Tree Grid 単一選択

cellSelection を single (単一) に設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、マウス ドラッグ モードは機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。

選択モードが single (単一) であるか multiple (複数) であるかに関係なく、単一セルが selected イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると RangeSelected イベントが発生します。

Tree 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 = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid.selectRange(range);
ts

セル選択のクリア

clearCellSelection は現在のセル選択をクリアします。

this.grid.clearCellSelection();
ts

選択したデータの取得

getSelectedData は、選択したデータの配列を選択内容に応じた形式で返します。例:

• 3 つの異なる単一セルが選択されている場合:

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
typescript

• 1 列から 3 つのセルが選択されている場合:

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

• 2 つの異なる範囲が選択されている場合:

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 プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<igc-tree-grid class="treeGrid"></igc-tree-grid>
ts

次に、そのクラスに関連する CSS プロパティを設定します。

.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

デモ

EXAMPLE

DATA

TS

HTML

CSS

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 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;

        this._bind = () => {
            grid.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;
            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
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="ID"
            header="Order ID"
            data-type="number">
            </igc-column>
            <igc-column
            field="Name"
            data-type="string"
            header="Order Product">
            </igc-column>
            <igc-column
            field="Units"
            data-type="number">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            data-type="currency">
            </igc-column>
            <igc-column
            field="Price"
            header="Price"
            data-type="currency">
            </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 */

#grid {
    --cell-selected-text-color: #FFFFFF;
    --cell-active-border-color: #f2c43c;
    --cell-selected-background: #0062a3;
}

cssコピー

Edit in: Codesandbox

API リファレンス

• IgcTreeGridComponent

その他のリソース

• 選択
• 行選択
• フィルタリング
• ソート
• 集計
• 列の移動
• 列のピン固定
• 列のサイズ変更
• 仮想化とパフォーマンス

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)