Blazor Grid 列選択の概要

Ignite UI for Blazor Data Grid は、DataGridToolbar コンポーネントまたはページのどこにでも配置できる ColumnChooser コンポーネントによって UI から列の表示/非表示を行う機能をサポートしています。列の IsHidden プロパティにより、手動生成の列に対してプログラムによって列の表示/非表示を設定することができます。IsHidden の値は ColumnChooser コンポーネントに反映されます。各方法は列の表示状態を変更するために使用できます。

Blazor Grid 列選択の例

ツールバーの列選択 UI

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

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

列選択は、グリッドの ColumnHidingAnimationMode および ColumnShowingAnimationMode プロパティを設定することでアニメーションで構成できます。

コード スニペット

以下は、データ グリッドの列選択ツールバー UI の実装方法を示します。

<DataGridToolbar ToolbarTitle="Grid Title"
    ColumnChooser="true"
    ColumnChooserText="Columns"
    ColumnChooserTitle="Column Chooser"
    TargetGrid="DataGridRef" />            
<DataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"                      
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft">                
</DataGrid>

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

シンプルな列選択

ツールバーなしで ColumnChooser UIを手動で表示し、ページの任意の場所に配置するとします。マークアップでコンポーネントのインスタンスを作成して簡単に行うことができます。

サンプル

コード スニペット

以下は、データ グリッドの列選択 UI の実装方法を示します。

<ColumnChooser Height="100%" Width="200px"
    Title="Column Chooser"                           
    TargetGrid="DataGridRef" />
<DataGrid Height="100%" Width="100%"
    @ref="DataGridRef"                      
    DataSource="DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft" />

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