Web Components Grid 行のピン固定

Web Components Grid の Ignite UI for Web Components 行ピン固定機能を使用すると、1 つまたは複数の行をグリッドの上部または下部にピン固定できます。行ピン固定を使用すると、エンドユーザーは特定の順序で行をピン固定し、IgcGridComponent を垂直にスクロールしても常に表示される特別な領域に行を複製できます。Web Components Grid には組み込みの行ピン固定 UI が含まれており、Grid のコンテキストで IgcActionStrip コンポーネントを初期化することで有効になります。その他、カスタム UI を定義し、行のピン固定 API を介して行のピン固定状態を変更できます。

Web Components Grid 行ピン固定の例

EXAMPLE

TS

HTML

CSS

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent } from 'igniteui-webcomponents-grids/grids';
import CustomersDataLocal from './CustomersDataLocal.json';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
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 propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private rowPinningEditor: IgcPropertyEditorPropertyDescriptionComponent
    private grid: IgcGridComponent
    private _pinningConfig1: IgcPinningConfig | null = null;
    public get pinningConfig1(): IgcPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }

    private actionStrip: IgcActionStripComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var rowPinningEditor = this.rowPinningEditor = document.getElementById('rowPinningEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webGridSetRowPinning = this.webGridSetRowPinning.bind(this);
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var actionStrip = this.actionStrip = document.getElementById('actionStrip') as IgcActionStripComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.grid;
            rowPinningEditor.changed = this.webGridSetRowPinning;
            grid.data = this.customersDataLocal;
            grid.pinning = this.pinningConfig1;
        }
        this._bind();
    }

    private _customersDataLocal: any[] = CustomersDataLocal;
    public get customersDataLocal(): any[] {
        return this._customersDataLocal;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webGridSetRowPinning(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var item = sender as IgcPropertyEditorPropertyDescriptionComponent;
        var newVal = item.primitiveValue;
        var grid = this.grid;
        grid.pinning.rows = newVal === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
    }

}

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

        description-type="WebGrid"
        is-horizontal="true"
        is-wrapping-enabled="false"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            name="rowPinningEditor"
            id="rowPinningEditor"
            value-type="EnumValue"
            label="Row Pinning toggle"
            drop-down-names="Top, Bottom"
            drop-down-values="Top, Bottom">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        primary-key="ID"
        cell-selection="none"
        row-editable="true">
            <igc-column
            field="Company"
            header="Company"
            width="300px">
            </igc-column>
            <igc-column
            field="ContactName"
            header="Name">
            </igc-column>
            <igc-column
            field="ContactTitle"
            header="Title">
            </igc-column>
            <igc-column
            field="Address"
            header="Address">
            </igc-column>
            <igc-column
            field="City"
            header="City">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code">
            </igc-column>
            <igc-column
            field="Phone"
            header="Phone">
            </igc-column>
            <igc-column
            field="Fax"
            header="Fax">
            </igc-column>
            <igc-action-strip
            name="actionStrip"
            id="actionStrip">
                <igc-grid-pinning-actions
                >
                </igc-grid-pinning-actions>
            </igc-action-strip>
        </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

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

行のピン固定 UI

組み込みの行ピン固定 UI は、IgcGridPinningActions コンポーネントと IgcActionStrip コンポーネントを追加することで有効になります。アクション ストリップは、行にカーソルを合わせると自動的に表示され、表示されている行の状態に基づいてピン固定またはピン固定解除ボタンのアイコンが表示されます。ピン固定された行のコピーをビューにスクロールする追加のアクションがピン固定された行ごとに表示されます。

<igc-grid auto-generate="false">
    <igc-column field="Name" header="Full Name"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>
html

行のピン固定 API

行のピン固定は Row の pinned 入力によって制御されます。デフォルトでピン固定行は IgcGridComponent の上側に固定して描画され、IgcGridComponent 本体のピン固定されていない行は垂直スクロールされます。

this.grid.getRowByIndex(0).pinned = true;
typescript

IgcGridComponent の pinRow または unpinRow メソッドを使用して ID によって行をピン固定またはピン固定解除できます。

this.grid.pinRow('ALFKI');
this.grid.unpinRow('ALFKI');
typescript

注: 行の ID は、グリッドの primaryKey またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。

行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、RowPinning イベントでイベント引数の InsertAtIndex プロパティを適切な位置インデックスに変更します。

<igc-grid id="grid" auto-generate="true">
</igc-grid>
html

constructor() {
    var grid1 = document.getElementById('grid1') as IgcGridComponent;
    grid1.data = this.data;
    grid1.addEventListener("rowPinning", this.rowPinning);
}

public rowPinning(event) {
    event.detail.insertAtIndex = 0;
}
typescript

ピン固定の位置

pinning 設定オプションを使用して、行のピン固定の位置を変更できます。ピン固定の位置を Top または Bottom のいずれかに設定できます。 Bottom に設定すると、行がピン固定されていない行の後に、グリッドの一番下にレンダリングされます。ピン固定されていない行は垂直にスクロールできますが、ピン固定された行は下側に固定されます。

<igc-grid id="dataGrid" auto-generate="true"></igc-grid>
html

var grid = document.getElementById('dataGrid') as IgcGridComponent;
grid.pinning = { rows: RowPinningPosition.Bottom };
typescript

カスタム行ピン固定 UI

カスタム UI を定義し、関連する API を介して行のピン状態を変更できます。

アイコン付きの追加の列による

アクション ストリップの代わりに、すべての行にピンのアイコンを表示し、エンドユーザーが特定の行のピン状態をクリックして変更できます。 カスタム アイコンを含むセル テンプレートの列を追加することで実行できます。

<igc-grid id="grid" primary-key="ID" auto-generate="false">
    <igc-column id="column1" name="column1"></igc-column>
</igc-grid>
html

constructor() {
    var grid = document.getElementById('grid') as IgcGridComponent;
    var column = document.getElementById('column1') as IgcColumnComponent;

    grid.data = this.data;
    column.bodyTemplate = this.pinCellTemplate;
}

public pinCellTemplate = (ctx: IgcCellTemplateContext) => {
   const index = ctx.cell.id.rowIndex;
    return html`<span @pointerdown=${(e: any) => this.togglePinning(index)}>📌</span>`;
}
typescript

カスタムアイコンをクリックすると、関連する行のピン状態は、行の API メソッドを使用して変更できます。

public togglePinning(index: number) {
    var grid = document.getElementsByTagName("igc-grid")[0] as IgcGridComponent;
    grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}
typescript

デモ

EXAMPLE

TS

HTML

CSS

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import CustomersDataLocal from './CustomersDataLocal.json';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";



ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private grid: IgcGridComponent
    private column1: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.customersDataLocal;
            column1.bodyTemplate = this.webGridRowPinCellTemplate;
        }
        this._bind();
    }

    private _customersDataLocal: any[] = CustomersDataLocal;
    public get customersDataLocal(): any[] {
        return this._customersDataLocal;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

        public webGridRowPinCellTemplate = (ctx: IgcCellTemplateContext) => {
            const index = ctx.cell.id.rowIndex;
            return html`<span @pointerdown=${(e: any) => this.toggleRowPin(index)}>📌</span>`
    }

    public toggleRowPin(index: number) {
        var grid = this.grid;
        grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
    }
}

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-grid
        name="grid"
        id="grid"
        primary-key="ID"
        cell-selection="none">
            <igc-column
            width="70px"
            filterable="false"
            pinned="true"
            name="column1"
            id="column1">
            </igc-column>
            <igc-column
            field="ID"
            width="150px"
            hidden="true">
            </igc-column>
            <igc-column
            field="Company"
            header="Company"
            width="350px">
            </igc-column>
            <igc-column
            field="ContactName"
            header="Name">
            </igc-column>
            <igc-column
            field="ContactTitle"
            header="Contact Tiasdsadtle">
            </igc-column>
            <igc-column
            field="Address">
            </igc-column>
            <igc-column
            field="City">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code">
            </igc-column>
            <igc-column
            field="Phone">
            </igc-column>
            <igc-column
            field="Fax">
            </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

行ピン固定の制限

• データソースに存在するレコードのみをピン固定できます。
• 行のピン固定状態は Excel にエクスポートされません。グリッドは行のピン固定が適用されずにエクスポートされます。
• グリッドのスクロール可能領域におけるピン固定行のコピーは、ピン固定行が存在する状態で他のグリッド機能が動作するのに不可欠な役割を果たします。そのため、その生成を無効化または削除することはできません。
• 行選択 は 行 ID のみで動作するため、ピン固定行を選択するとそのコピーも選択されます (逆も同様)。さらに、ピン固定領域での範囲選択 (Shift + クリックにより) は、スクロール可能な領域で行を範囲選択する場合と同じように機能します。結果として、間にある行はピン固定されていなくてもすべて選択されます。API を 介して選択した行を取得すると、選択した各レコードの単一のインスタンスのみを返します。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<igc-grid class="grid"></igc-grid>
html

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

.grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}
css

デモ

EXAMPLE

TS

HTML

CSS

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule, WebActionStripDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import CustomersDataLocal from './CustomersDataLocal.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private _pinningConfig1: IgcPinningConfig | null = null;
    public get pinningConfig1(): IgcPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }

    private company: IgcColumnComponent
    private contactName: IgcColumnComponent
    private contactTitle: IgcColumnComponent
    private address: IgcColumnComponent
    private city: IgcColumnComponent
    private postalCode: IgcColumnComponent
    private phone: IgcColumnComponent
    private fax: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        this.webGridPinRowOnRendered = this.webGridPinRowOnRendered.bind(this);
        var company = this.company = document.getElementById('Company') as IgcColumnComponent;
        var contactName = this.contactName = document.getElementById('ContactName') as IgcColumnComponent;
        var contactTitle = this.contactTitle = document.getElementById('ContactTitle') as IgcColumnComponent;
        var address = this.address = document.getElementById('Address') as IgcColumnComponent;
        var city = this.city = document.getElementById('City') as IgcColumnComponent;
        var postalCode = this.postalCode = document.getElementById('PostalCode') as IgcColumnComponent;
        var phone = this.phone = document.getElementById('Phone') as IgcColumnComponent;
        var fax = this.fax = document.getElementById('Fax') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.customersDataLocal;
            grid.addEventListener("rendered", this.webGridPinRowOnRendered);
            grid.pinning = this.pinningConfig1;
        }
        this._bind();
    }

    private _customersDataLocal: any[] = CustomersDataLocal;
    public get customersDataLocal(): any[] {
        return this._customersDataLocal;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebGridDescriptionModule.register(context);
            WebActionStripDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webGridPinRowOnRendered(args: any): void {
        var grid = this.grid as any;
        grid.pinRow("ALFKI");
        grid.pinRow("AROUT");
    }

}

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-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        primary-key="ID"
        cell-selection="none">
            <igc-column
            name="Company"
            id="Company"
            field="Company"
            header="Company"
            width="300px">
            </igc-column>
            <igc-column
            name="ContactName"
            id="ContactName"
            field="ContactName"
            header="Name">
            </igc-column>
            <igc-column
            name="ContactTitle"
            id="ContactTitle"
            field="ContactTitle"
            header="Title">
            </igc-column>
            <igc-column
            name="Address"
            id="Address"
            field="Address"
            header="Address">
            </igc-column>
            <igc-column
            name="City"
            id="City"
            field="City"
            header="City">
            </igc-column>
            <igc-column
            name="PostalCode"
            id="PostalCode"
            field="PostalCode"
            header="Postal Code">
            </igc-column>
            <igc-column
            name="Phone"
            id="Phone"
            field="Phone"
            header="Phone">
            </igc-column>
            <igc-column
            name="Fax"
            id="Fax"
            field="Fax"
            header="Fax">
            </igc-column>
            <igc-action-strip
            >
                <igc-grid-pinning-actions
                >
                </igc-grid-pinning-actions>
            </igc-action-strip>
        </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 */

    #grid {
        --ig-grid-pinned-border-width: 5px;
        --ig-grid-pinned-border-style: double;
        --ig-grid-pinned-border-color: #FFCD0F;
        --ig-grid-cell-active-border-color: #FFCD0F;
    }

cssコピー

Edit in: Codesandbox

API リファレンス

• IgcGridComponent
• IgcGridRow
• IgcRowType

その他のリソース

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

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

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