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 関数で列のピン固定を使用して、データ グリッドで列のピン固定を実装する方法を示します。

    <IgbDataGrid Height="100%" Width="100%"
        DefaultColumnMinWidth="120"
        DataSource="@DataSource"
        AutoGenerateColumns="false"
        @ref="DataGridRef">
    
        @*Columns Pinned Left*@
        <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" />
        <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
        <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" />
    
        @*Columns Unpinned*@
        <IgbDateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
        <IgbNumericColumn Field="Age" Pinned="PinnedPositions.None" />
        <IgbImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />
    
        @*Columns Pinned Right*@
        <IgbTextColumn Field="Street" Pinned="PinnedPositions.Right" />
        <IgbTextColumn Field="City" Pinned="PinnedPositions.Right" />
        <IgbTextColumn Field="Country" Pinned="PinnedPositions.Right" />
    </IgbDataGrid>
    

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

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

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

    サンプル

    コード スニペット

    <IgbDataGridToolbar TargetGrid="DataGridRef"
        ToolbarTitle="Grid Toolbar Title"
        ColumnPinning="true"
        ColumnPinningText="Pinning"
        ColumnPinningTitle="Column Pinning" />
    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DataSource="DataSource" />
    
    @code {
        private IgbDataGrid grid;
        public IgbDataGrid DataGridRef
        {
            get
            {
                return grid;
            }
            set
            {
                grid = value;
                StateHasChanged();
            }
        }
    }