[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Blazor Grid 列選択の概要
Ignite UI for Blazor Data Grid は、IgbDataGridToolbar コンポーネントまたはページのどこにでも配置できる ColumnChooser コンポーネントによって UI から列の表示/非表示を行う機能をサポートしています。列の IsHidden プロパティにより、手動生成の列に対してプログラムによって列の表示/非表示を設定することができます。IsHidden の値は ColumnChooser コンポーネントに反映されます。各方法は列の表示状態を変更するために使用できます。
Blazor Grid 列選択の例
ツールバーの列選択 UI
列選択 UI は、グリッドとは別に IgbDataGridToolbar コンポーネント内でアクセスできます。このため、ツールバーの ColumnChooser プロパティを true に設定します。
ツールバーは IgbButton を表示し、クリックすると列選択 UI を表示します。このボタンは、非表示列の合計も表示します。ツールバーが作成されていない場合、IgbColumnChooser プロパティを有効にしても効果はなく、ボタンを非表示にします。
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();
}
}
}
シンプルな列選択
ツールバーなしで IgbColumnChooser 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();
}
}
}
API リファレンス
IgbButtonColumnChooserTextColumnChooserTitleIgbColumnChooserColumnHidingAnimationModeColumnShowingAnimationModeIgbDataGridToolbar