Blazor Grid 列ピン固定の概要

Ignite UI for Blazor Data Grid は列をピン固定する機能をサポートし、エンド ユーザーが特定の列順序で列をロックできます。

単一または複数の列をデータ グリッドの左側または右側にピン固定できます。その他、PinColumn 関数を介して列のピン固定状態を変更できます。

Blazor Grid 列ピン固定の例

データグリッドの列ピン固定 API は、列の Pinned プロパティまたはグリッドの PinColumn 関数を設定することで有効にできます。

Pinned プロパティに 3 つのオプションがあります。

  • Left - Left を有効にすると、ピン固定した列がグリッドの左側に配置されます。
  • Right - Right を有効にすると、ピン固定した列がグリッドの右側に配置されます。
  • None - None を有効にすると、列のピン固定を解除し、グリッド内のデフォルトの配置を再配置します。

ピン固定された列に近接するピン固定されていない列は、水平スクロールを維持します。

PinColumn 関数に 2 つのパラメーターがあります。最初のパラメーターはピン固定する列で、2 番目は PinnedPositions 列挙体設定です。

コード スニペット

以下のコードは、Pinned プロパティと PinColumn 関数で列のピン固定を使用して、データ グリッドで列のピン固定を実装する方法を示します。

<DataGrid Height="100%" Width="100%"
    DefaultColumnMinWidth="120"                      
    DataSource="@DataSource"
    AutoGenerateColumns="false"
    @ref="DataGridRef">

    @*Columns Pinned Left*@
    <TextColumn Field="ID" Pinned="PinnedPositions.Left" />
    <TextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
    <TextColumn Field="LastName" Pinned="PinnedPositions.Left" />

    @*Columns Unpinned*@
    <DateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
    <NumericColumn Field="Age" Pinned="PinnedPositions.None" />
    <ImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />

    @*Columns Pinned Right*@
    <TextColumn Field="Street" Pinned="PinnedPositions.Right" />
    <TextColumn Field="City" Pinned="PinnedPositions.Right" />
    <TextColumn Field="Country" Pinned="PinnedPositions.Right" />                
</DataGrid>

ツールバーの列ピン固定 UI

列ピン固定 UI は、グリッドとは別に DataGridToolbar コンポーネント内でアクセスできます。 このため、ツールバーの columnPinning プロパティを true に設定します。ツールバーは Button を表示し、クリックすると列ピン固定 UI を表示します。このボタンは、左側にピン固定された列の合計も表示します。ツールバーが作成されていない場合、columnPinning プロパティを有効にしても効果はなく、ボタンを非表示にします。

DataGridToolbar は、toolbarTitle プロパティを使用してツールバーにタイトルを追加、 columnPinningText プロパティを設定して Button にテキストを配置、columnPinningTitle を設定して、タイトル ヘッダーを列非表示 UI に追加などの追加プロパティを提供します。

サンプル

コード スニペット

<DataGridToolbar TargetGrid="DataGridRef"
    ToolbarTitle="Grid Toolbar Title"
    ColumnPinning="true"
    ColumnPinningText="Pinning"
    ColumnPinningTitle="Column Pinning" />
<DataGrid Height="100%" Width="100%"
    @ref="DataGridRef" 
    DataSource="DataSource" />

@code {
    private DataGrid grid;
    public DataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}