[!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 リファレンス
IgbButton
ColumnChooserText
ColumnChooserTitle
IgbColumnChooser
ColumnHidingAnimationMode
ColumnShowingAnimationMode
IgbDataGridToolbar