Premium

Web Components Grid 列ピン固定

Web Components Grid の Ignite UI for Web Components 列のピン固定機能を使用すると、開発者は特定の列を希望の順序でロックできるため、ユーザーが IgcGrid を水平方向にスクロールしている場合でも、常に可視性を確保できます。列ピン固定用の統合 UI があり、Web Components Grid ツールバーからアクセスできます。さらに、開発者は、列のピン状態を変更するカスタムユーザーインターフェイスを柔軟に構築できます。

Web Components Grid 列ピン固定の例

以下の例は、1 つまたは複数の列を IgcGrid の左側または右側にピン固定する方法を示しています。

列ピン固定の API

列のピン固定は Column.pinned の Pinned プロパティによって制御されます。デフォルトでピン固定列は IgcGrid の左側に固定して描画され、IgcGrid 本体のピン固定されていない列は水平スクロールされます。

<igc-grid id="grid1" width="700px" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="AthleteNumber"></igc-column>
    <igc-column field="TrackProgress"></igc-column>
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
}

IgcGrid.pinColumn の PinColumn または UnpinColumn メソッドを使用してフィールド名によって列をピン固定またはピン固定解除できます。

this.grid.pinColumn('AthleteNumber');
this.grid.unpinColumn('Name');

両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に列がすでにその状態になっていることがあります。

列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、ColumnPin イベントでイベント引数の InsertAtIndex プロパティを適切な位置インデックスに変更します。

<IgbGrid Data=data AutoGenerate=false>
    <IgbColumn Field="Name" Pinned=true></IgbColumn>
    <IgbColumn Field="AthleteNumber"></IgbColumn>
    <IgbColumn Field="TrackProgress"></IgbColumn>
</IgbGrid>

<igc-grid id="grid1" width="700px" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="AthleteNumber"></igc-column>
    <igc-column field="TrackProgress"></igc-column>
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
}

ピン固定の位置

Pinning 設定オプションを使用して、列のピン固定の位置を変更できます。列の位置を [Start] または [End] のいずれかに設定できます。 [End] に設定すると、列がピン固定されていない列の後に、グリッドの最後にレンダリングされます。ピン固定されていない列は水平にスクロールできますが、ピン固定された列は右側に固定されます。

<igc-grid id="dataGrid" auto-generate="true"></igc-grid>

var grid = document.getElementById('dataGrid') as IgcGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };

デモ

両側の列のピン固定

各列のピン固定位置を個別に指定できるため、グリッドの両側に列をピン固定して利便性を高め、データセットの最適化を容易にすることができます。詳細については、以下のデモを参照してください。列をピン固定するには、ヘッダーをクリックして列を選択し、ツールバーに追加されたピン固定ボタンを使用するか、列を別のピン固定された列にドラッグします。

デモ

You can define your custom UI and change the pin state of the columns via the related API.

Let’s say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column’s pin state.

This can be done by creating a header template for the columns with a custom icon.

<igc-grid id="grid1" width="100%" height="500px" auto-generate="false">
    <igc-column id="Name" field="Name" data-type="String" width="250px"></igc-column>
    <igc-column id="Title" field="Title" data-type="String" width="300px"></igc-column>
    <igc-column id="ID" field="ID" data-type="Number" width="200px"></igc-column>
    <igc-column id="HireDate" field="HireDate" header="Hire Date" data-type="Date" width="200px"></igc-column>
    <igc-column id="Age" field="Age" data-type="Number" width="200px"></igc-column>
    <igc-column id="Address" field="Address" data-type="String" width="200px"></igc-column>
    <igc-column id="City" field="City" data-type="String" width="200px"></igc-column>
    <igc-column id="Country" field="Country" data-type="String" width="200px"></igc-column>
    <igc-column id="Fax" field="Fax" data-type="String" width="200px"></igc-column>
    <igc-column id="PostalCode" field="PostalCode" header="Postal Code" data-type="String" width="200px"></igc-column>
    <igc-column id="Phone" field="Phone" data-type="String" width="200px"></igc-column>
</igc-grid>

constructor() {
    var grid1 = document.getElementById('grid1') as IgcGridComponent;
    var Name = document.getElementById('Name') as IgcColumnComponent;
    var Title = document.getElementById('Title') as IgcColumnComponent;
    var ID = document.getElementById('ID') as IgcColumnComponent;
    var HireDate = document.getElementById('HireDate') as IgcColumnComponent;
    var Age = document.getElementById('Age') as IgcColumnComponent;
    var Address = document.getElementById('Address') as IgcColumnComponent;
    var City = document.getElementById('City') as IgcColumnComponent;
    var Country = document.getElementById('Country') as IgcColumnComponent;
    var Fax = document.getElementById('Fax') as IgcColumnComponent;
    var PostalCode = document.getElementById('PostalCode') as IgcColumnComponent;
    var Phone = document.getElementById('Phone') as IgcColumnComponent;

    grid.data = this.data;
    Name.headerTemplate = this.pinHeaderTemplate;
    Title.headerTemplate = this.pinHeaderTemplate;
    ID.headerTemplate = this.pinHeaderTemplate;
    HireDate.headerTemplate = this.pinHeaderTemplate;
    Age.headerTemplate = this.pinHeaderTemplate;
    Address.headerTemplate = this.pinHeaderTemplate;
    City.headerTemplate = this.pinHeaderTemplate;
    Country.headerTemplate = this.pinHeaderTemplate;
    Fax.headerTemplate = this.pinHeaderTemplate;
    PostalCode.headerTemplate = this.pinHeaderTemplate;
    Phone.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}

On click of the custom icon the pin state of the related column can be changed using the column’s API methods.

public toggleColumn(col: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}

カスタム列ピン固定 UI

デモ

Setting column widths in percentage (%) explicitly makes the IgcGrid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the IgcGrid.

ピン固定の制限

列幅をパーセンテージ (%) で設定した場合にピン固定列があると IgcGrid 本体およびヘッダーコンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、IgcGrid によって自動的に割り当てる必要があります。

<igc-grid id="grid"></igc-grid>

Then set the related CSS properties to this class:

#grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

スタイル設定

API リファレンス

IgcGrid
Column

カスタムテーマの定義

次に、grid-theme を拡張し、必要に応じてピン固定をカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。

Our community is active and always welcoming to new ideas.

Web Components Grid 列ピン固定