[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components Grid 列ピン固定の概要
Ignite UI for Web Components Data Grid は列をピン固定する機能をサポートし、エンド ユーザーが特定の列順序で列をロックできます。
単一または複数の列をデータ グリッドの左側または右側にピン固定できます。その他、pinColumn 関数を介して列のピン固定状態を変更できます。
Web Components Grid 列ピン固定の例
データグリッドの列ピン固定 API は、列の Pinned プロパティまたはグリッドの pinColumn 関数を設定することで有効にできます。
Pinned プロパティに 3 つのオプションがあります。
- Left -
Leftを有効にすると、ピン固定した列がグリッドの左側に配置されます。 - Right -
Rightを有効にすると、ピン固定した列がグリッドの右側に配置されます。 - None -
Noneを有効にすると、列のピン固定を解除し、グリッド内のデフォルトの配置を再配置します。
ピン固定された列に近接するピン固定されていない列は、水平スクロールを維持します。
pinColumn 関数に 2 つのパラメーターがあります。最初のパラメーターはピン固定する列で、2 番目は PinnedPositions 列挙型設定です。
コード スニペット
以下のコードは、Pinned プロパティと pinColumn 関数で列のピン固定を使用して、データ グリッドで列のピン固定を実装する方法を示します。
<igc-data-grid
id="grid"
height="calc(100% - 40px)"
width="100%"
auto-generate-columns="false"
default-column-min-width="120px"
scrollbar-style="thin"
>
<igc-text-column pinned="left" field="ID" header-text="Employee ID" width="100" horizontal-alignment="center"></igc-text-column>
<igc-text-column pinned="left" field="FirstName" header-text="First Name" width="170"></igc-text-column>
<igc-text-column pinned="left" field="LastName" header-text="Last Name" width="170"></igc-text-column>
<igc-date-time-column pinned="none" field="Birthday" header-text="Date of Birth" width="150" horizontal-alignment="center"></igc-date-time-column>
<igc-numeric-column pinned="none" field="Age" width="100" horizontal-alignment="center"></igc-numeric-column>
<igc-image-column pinned="none" field="CountryFlag" header-text="Country" width="140" content-opacity="1" horizontal-alignment="center"></igc-image-column>
<igc-text-column pinned="right" field="Street" header-text="Address" width="240"></igc-text-column>
<igc-text-column pinned="right" field="City" width="150" ></igc-text-column>
<igc-text-column pinned="right" field="Country" width="150" ></igc-text-column>
</igc-data-grid>
import { PinnedPositions } from 'igniteui-webcomponents-grids';
onButtonPinLeft() {
let idColumn = this.grid.actualColumns.item(0);
let firstNameColumn = this.grid.actualColumns.item(1);
let lastNameColumn = this.grid.actualColumns.item(2);
//pinned property
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
// pinColumn Function
this.grid.pinColumn(idColumn, PinnedPositions.Left);
this.grid.pinColumn(firstNameColumn, PinnedPositions.Left);
this.grid.pinColumn(lastNameColumn, PinnedPositions.Left);
}
onButtonPinRight() {
let streetColumn = this.grid.actualColumns.item(6);
let cityColumn = this.grid.actualColumns.item(7);
let countryColumn = this.grid.actualColumns.item(8);
//pinned property
streetColumn.pinned = PinnedPositions.Right;
cityColumn.pinned = PinnedPositions.Right;
countryColumn.pinned = PinnedPositions.Right;
//pinColumn function
this.grid.pinColumn(streetColumn, PinnedPositions.Right);
this.grid.pinColumn(cityColumn, PinnedPositions.Right);
this.grid.pinColumn(countryColumn, PinnedPositions.Right);
}
onButtonUnPin() {
let idColumn = this.grid.actualColumns.item(0);
let firstNameColumn = this.grid.actualColumns.item(1);
let lastNameColumn = this.grid.actualColumns.item(2);
//pinned property
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
//pinColumn function
this.grid.pinColumn(idColumn, PinnedPositions.None);
this.grid.pinColumn(firstNameColumn, PinnedPositions.None);
this.grid.pinColumn(lastNameColumn, PinnedPositions.None);
let streetColumn = this.grid.actualColumns.item(6);
let cityColumn = this.grid.actualColumns.item(7);
let countryColumn = this.grid.actualColumns.item(8);
//pinned property
streetColumn.pinned = PinnedPositions.None;
cityColumn.pinned = PinnedPositions.None;
countryColumn.pinned = PinnedPositions.None;
//pinColumn function
this.grid.pinColumn(streetColumn, PinnedPositions.None);
this.grid.pinColumn(cityColumn, PinnedPositions.None);
this.grid.pinColumn(countryColumn, PinnedPositions.None);
}
ツールバーの列ピン固定 UI
列ピン固定 UI は、グリッドとは別に IgcDataGridToolbarComponent コンポーネント内でアクセスできます。このため、ツールバーの columnPinning プロパティを true に設定します。ツールバーは IgcButtonComponent を表示し、クリックすると列ピン固定 UI を表示します。このボタンは、左側にピン固定された列の合計も表示します。ツールバーが作成されていない場合、columnPinning プロパティを有効にしても効果はなく、ボタンを非表示にします。
IgcDataGridToolbarComponent は、toolbarTitle プロパティを使用してツールバーにタイトルを追加、columnPinningText プロパティを設定して IgcButtonComponent にテキストを配置、columnPinningTitle を設定して、タイトル ヘッダーを列非表示 UI に追加などの追加プロパティを提供します。
サンプル
コード スニペット
<igc-dataGrid-toolbar
toolbar-title="Grid Title"
column-pinning="true"
column-pinning-text="Pinning"
column-pinning-title="Columns Pinned Left">
</igc-dataGrid-toolbar>
<igc-data-grid
id="grid"
height="calc(100% - 40px)"
width="100%"
auto-generate-columns="false"
default-column-min-width="120px"
scrollbar-style = "thin">
</igc-data-grid>
import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids';
private grid: IgcDataGridComponent;
private toolbar: IgcToolbarComponent;
connectedCallback() {
this.toolbar.targetGrid = this.grid;
let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
productNameColumn.pinned = true;
this.toolbar.columnPinning = true;
this.toolbar.toolbarTitle = "Grid Title";
this.toolbar.columnPinningText = "Pinning Text";
this.toolbar.columnPinningTitle = "Pinning Title Text";
}