Blazor Grid 列選択の概要

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

    Blazor Grid 列選択の例

    ツールバーの列選択 UI

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

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

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

    コード スニペット

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

    <IgbDataGridToolbar ToolbarTitle="Grid Title"
        ColumnChooser="true"
        ColumnChooserText="Columns"
        ColumnChooserTitle="Column Chooser"
        TargetGrid="DataGridRef" />
    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DefaultColumnMinWidth="120"
        DataSource="@DataSource"
        ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft">
    </IgbDataGrid>
    
    @code {
        private DataGrid grid;
        public DataGrid DataGridRef
        {
            get
            {
                return grid;
            }
            set
            {
                grid = value;
                StateHasChanged();
            }
        }
    }
    

    シンプルな列選択

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

    サンプル

    コード スニペット

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

    <IgbColumnChooser Height="100%" Width="200px"
        Title="Column Chooser"
        TargetGrid="DataGridRef" />
    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DataSource="DataSource"
        ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft" />
    
    @code {
        private IgbDataGrid grid;
        public IgbDataGrid DataGridRef
        {
            get
            {
                return grid;
            }
            set
            {
                grid = value;
                StateHasChanged();
            }
        }
    }