[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
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();
}
}
}
API リファレンス
IgbButtonIgbDataGridToolbarPinColumnPinnedPositionsPinned