Blazor Grid 列ピン固定

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

Blazor Grid 列ピン固定の例

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

列ピン固定の API

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

<IgbGrid Data=data AutoGenerate=false>
    <IgbColumn Field="Name" Pinned=true></IgbColumn>
    <IgbColumn Field="AthleteNumber"></IgbColumn>
    <IgbColumn Field="TrackProgress"></IgbColumn>
</IgbGrid>

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

@code {
    grid.PinColumn("AthleteNumber", 0);
    grid.UnpinColumn("Name", 0);
}

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

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

列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、ColumnPinScript イベントをサブスクライブし、イベント引数の InsertAtIndex プロパティを目的の位置インデックスに変更するための JavaScript 関数を提供します。

<IgbGrid Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>


//In JavaScript
function onColumnPin(e) {
    if (e.detail.column.field == "Country") {
        e.detail.insertAtIndex = 0;
    }
}

igRegisterScript("onColumnPin", onColumnPin, false);

ピン固定の位置

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

<IgbGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbGrid>

@code {
    private IgbPinningConfig pinningConfig = new() {
        Columns = ColumnPinningPosition.End
    };
}

デモ

カスタム列ピン固定 UI

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

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

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

<IgbGrid AutoGenerate="false" Data="CustomersData" Name="grid" @ref="grid">
    <IgbColumn Field="ID" Hidden="true"></IgbColumn>

    <IgbColumn Field="CompanyName" Header="Company" Width="300px" 
    HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>

    <IgbColumn Field="ContactName" Header="Name" Width="200px" Pinned="true"
    HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column2" @ref="column2"> </IgbColumn>

    <IgbColumn Field="ContactTitle" Header="Title" Width="200px" Pinned="true"
    HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column3" @ref="column3"> </IgbColumn>
</IgbGrid>

// In JavaScript
igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-grid")[0];
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        grid.markForCheck();
    }
    return html`<div>
    <span style="float:left">${ctx.column.field}</span>
    <span style="float:right" @pointerdown="${() => toggleColumnPin(ctx.column.field)}">📌</span>
</div>`;
}, false);

デモ

ピン固定の制限

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

スタイル設定

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

<IgbGrid Id="grid"></IgbGrid>

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 リファレンス

その他のリソース

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