Web Components Hierarchical Grid 列ピン固定

Web Components Hierarchical Grid の Ignite UI for Web Components 列のピン固定機能を使用すると、開発者は特定の列を希望の順序でロックできるため、ユーザーが IgcGridComponent を水平方向にスクロールしている場合でも、常に可視性を確保できます。 列ピン固定用の統合 UI があり、Web Components Hierarchical Grid ツールバーからアクセスできます。さらに、開発者は、列のピン状態を変更するカスタム ユーザー インターフェイスを柔軟に構築できます。

Web Components Hierarchical Grid 列ピン固定の例

以下の例は、1 つまたは複数の列を IgcHierarchicalGridComponent の左側または右側にピン固定する方法を示しています。

列ピン固定の API

列のピン固定は IgcColumnComponent の pinned プロパティによって制御されます。デフォルトでピン固定列は IgcHierarchicalGridComponent の左側に固定して描画され、IgcHierarchicalGridComponent 本体のピン固定されていない列は水平スクロールされます。

<igc-hierarchical-grid id="hierarchicalGrid" class="hgrid" auto-generate="false"
        height="600px" width="800px" >
    <igc-column field="Artist" width="200px" pinned="true"></igc-column>
    <igc-column field="Debut" width="200px"></igc-column>
</igc-hierarchical-grid>

IgcHierarchicalGridComponent の pinColumn または unpinColumn メソッドを使用してフィールド名によって列をピン固定またはピン固定解除できます。

this.hierarchicalGrid.pinColumn('Artist');
this.hierarchicalGrid.unpinColumn('Debut');

両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に列がすでにその状態になっていることがあります。

列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、ColumnPin イベントでイベント引数の InsertAtIndex プロパティを適切な位置インデックスに変更します。

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

constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}

public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}

ピン固定の位置

pinning 設定オプションを使用して、列のピン固定の位置を変更できます。列の位置を [Start] または [End] のいずれかに設定できます。 [End] に設定すると、列がピン固定されていない列の後に、グリッドの最後にレンダリングされます。ピン固定されていない列は水平にスクロールできますが、ピン固定された列は右側に固定されます。

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

var grid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };

デモ

カスタム列ピン固定 UI

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

ツールバーの代わりに、エンドユーザーが特定の列のピンの状態を変更するためにクリックできる列ヘッダーにピンアイコンを定義するとします。

これは、カスタムアイコンを使用して列のヘッダーテンプレートを作成することで実行できます。

<igc-hierarchical-grid id="hGrid" class="hierarchicalGrid" auto-generate="false"
    height="500px" width="100%">
    <igc-column id="CompanyName" field="CompanyName" header="Company Name" width="200px" pinned="true"></igx-column>
    <igc-column id="ContactName" field="ContactName" header="Contact Name" width="150px"></igx-column>
    <igc-column id="ContactTitle" field="ContactTitle" header="Contact Title" width="200px"></igx-column>
    <igc-row-island key="Orders" auto-generate="false">
        <igc-column id="OrderDate" field="OrderDate" header="Order Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="RequiredDate" field="RequiredDate" header="Required Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="ShippedDate" field="ShippedDate" header="Shipped Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="ShipVia" field="ShipVia" header="Ship Via" width="150px"></igx-column>
        <igc-row-island key="OrderDetails" auto-generate="false">
            <igc-column field="UnitPrice" header="Unit Price" width="150px"></igx-column>
            <igc-column field="Quantity" width="150px"></igx-column>
            <igc-column field="Discount" width="150px"></igx-column>
        </igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>

constructor() {
    var hGrid = this.hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
    var CompanyName = this.CompanyName = document.getElementById('CompanyName') as IgcColumnComponent;
    var ContactName = this.ContactName = document.getElementById('ContactName') as IgcColumnComponent;
    var ContactTitle = this.ContactTitle = document.getElementById('ContactTitle') as IgcColumnComponent;

    var OrderDate = this.OrderDate = document.getElementById('OrderDate') as IgcColumnComponent;
    var RequiredDate = this.RequiredDate = document.getElementById('RequiredDate') as IgcColumnComponent;
    var ShippedDate = this.ShippedDate = document.getElementById('ShippedDate') as IgcColumnComponent;
    var ShipVia = this.ShipVia = document.getElementById('ShipVia') as IgcColumnComponent;

    hGrid.data = this.data;
    CompanyName.headerTemplate = this.pinHeaderTemplate;
    ContactName.headerTemplate = this.pinHeaderTemplate;
    ContactTitle.headerTemplate = this.pinHeaderTemplate;
    OrderDate.headerTemplate = this.pinHeaderTemplate;
    RequiredDate.headerTemplate = this.pinHeaderTemplate;
    ShippedDate.headerTemplate = this.pinHeaderTemplate;
    ShipVia.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}

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

public toggleColumn(col: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}

デモ

ピン固定の制限

• 列幅をパーセンテージ (%) で設定した場合にピン固定列があると IgcHierarchicalGridComponent 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、IgcHierarchicalGridComponent によって自動的に割り当てる必要があります。

スタイル設定

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

<igc-hierarchical-grid id="grid"></igc-hierarchical-grid>

Then set the related CSS properties to this class:

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

デモ

API リファレンス

• IgcHierarchicalGridComponent
• IgcColumnComponent

その他のリソース

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

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