Premium

Blazor Hierarchical Grid 列ピン固定

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

Blazor Hierarchical Grid 列ピン固定の例

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

列ピン固定の API

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

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

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

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

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="Title"></igx-column>
    <igx-column [field]="ID"></igx-column>
</igx-tree-grid>

ピン固定の位置

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

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

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

デモ

両側の列のピン固定

各列のピン固定位置を個別に指定できるため、グリッドの両側に列をピン固定して利便性を高め、データセットの最適化を容易にすることができます。詳細については、以下のデモを参照してください。列をピン固定するには、ヘッダーをクリックして列を選択し、ツールバーに追加されたピン固定ボタンを使用するか、列を別のピン固定された列にドラッグします。

デモ

You can define your custom UI and change the pin state of the columns via the related API.

Let’s say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column’s pin state.

This can be done by creating a header template for the columns with a custom icon.

On click of the custom icon the pin state of the related column can be changed using the column’s API methods.

カスタム列ピン固定 UI

デモ

Setting column widths in percentage (%) explicitly makes the IgbHierarchicalGrid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the IgbHierarchicalGrid.

ピン固定の制限

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

<IgbHierarchicalGrid Id="grid"></IgbHierarchicalGrid>

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

IgbHierarchicalGrid
IgbColumn

カスタムテーマの定義

次に、grid-theme を拡張し、必要に応じてピン固定をカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。

Our community is active and always welcoming to new ideas.

Blazor Hierarchical Grid 列ピン固定