Web Components Hierarchical Grid 列のサイズ変更の概要

    Web Components Hierarchical Grid の Ignite UI for Web Components 列のサイズ変更機能を使用すると、ユーザーは IgcHierarchicalGridComponent の列の幅を簡単に調整できます。デフォルトでは、ドラッグによるサイズ変更操作が有効になっている間、一時的なサイズ変更インジケーターが表示されます。利用可能なサイズ変更オプションがいくつかあります - ピクセル/パーセンテージでの列のサイズ変更、列のサイズ変更の制限、ダブルクリック時の列の自動サイズ変更、および初期化時の列の自動サイズ変更。

    Web Components Hierarchical Grid 列のサイズ変更の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    列のサイズ変更は列レベルで有効化にできます。つまり、IgcHierarchicalGridComponent にサイズ変更可能な列およびサイズ変更不可の列の両方を含むことが可能です。IgcColumnComponent の resizable 入力によって制御されます。

    <igc-column field="Artist" resizable="true"></igc-column>
html

    IgcHierarchicalGridComponent の ColumnResized イベントを処理し、列がサイズ変更されたときにカスタム ロジックを実装できます。以前の列幅、新しい列幅、および IgcColumnComponent オブジェクトがイベント引数で公開されます。

    <igc-hierarchical-grid id="hierarchicalGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID"
    height="600px" width="100%">
    <igc-column field="Artist" resizable="true"></igc-column>
</igc-hierarchical-grid>
html
    constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
    hierarchicalGrid.data = this.data;
    hierarchicalGrid.columnResized = this.onResize;
}

public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}
ts

    ピクセル/パーセンテージで列のサイズを変更する

    ユーザーのシナリオに応じて、列の幅はピクセル、パーセンテージ、または両方の組み合わせで定義できます。これらのシナリオはすべて、列のサイズ変更機能でサポートされています。デフォルトでは、列に幅が設定されていない場合、ピクセルで設定された幅の使用可能なスペースに収まります。

    つまり、次の構成が可能です。

    <igc-hierarchical-grid id="hierarchicalGrid" class="hgrid" auto-generate="false"
        height="600px" width="100%">
        <igc-column field="Artist" resizable="true" width="10%"></igc-column>
        <igc-column field="GrammyNominations" resizable="true" width="100px"></igc-column>
        <igc-column field="GrammyAwards" resizable="true"></igc-column>
</igc-hierarchical-grid>
html

    ピクセルとパーセンテージで設定された場合で列のサイズ変更の動作は少々異なります。

    ピクセル

    幅がピクセルで設定された列のサイズ変更は、マウスの水平移動量を列のサイズに直接足したり引いたりして行なわれます。

    パーセンテージ

    幅がパーセンテージで設定された列のサイズを変更する場合、ピクセル単位のマウスの水平移動量は、ほぼグリッド幅に対するパーセンテージの量に変換されます。列はレスポンシブな状態のまま、その後のグリッドのサイズ変更は列にも反映されます。

    Ignite UI for Web Components | CTA Banner

    列のサイズ変更の制限

    列の最小幅および最大幅の構成も可能です。IgcColumnComponent の minWidth および maxWidth入力によって制御されます。この場合、サイズ変更インジケーターのドラッグ操作が制限されます。列が minWidth および maxWidth によって定義される範囲以外にサイズ変更できないことをユーザーに通知します。

    <igc-column field="Artist" width="100px" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

    列幅の最小値と最大値のタイプ (ピクセルまたはパーセンテージ) を混在させることができます。最小値と最大値がパーセンテージに設定されている場合、それぞれの列サイズはピクセルと同様の正確なサイズに制限されます。

    つまり、次の構成が可能です。

    <igc-column field="Artist" width="100px" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

    または

    <igc-column field="Artist" width="100px" resizable="true"
            min-width="60px" max-width="15%"></igc-column>
html

    ダブルクリックで列の自動サイズ調整

    各列ヘッダーの右側をダブルクリックして列を自動サイズ調整することができます。列は、現在表示されているヘッダーを含む一番長いセル値にサイズ設定されます。この動作はデフォルトで有効なため、追加で構成する必要はありません。ただし、maxWidth がその列に設定され、新しい幅が maxWidth 値より大きい場合、列は自動サイズ調整されません。この場合、列が maxWidth 値に設定されます。

    また、IgcColumnComponent の autosize メソッドで列を動的に自動でサイズ変更できます。

    constructor() {
    var column = this.column = document.getElementById('Artist') as IgcColumnComponent;
    column.autosize();
}
typescript

    初期化時に列を自動サイズ調整

    width を 'auto' に設定することで、初期化時に各列を自動サイズに設定できます。

    <igc-column width='auto'>
html

    列がビューで最初に初期化されるとき、その幅は、表示されている最も長いセルまたはヘッダーのサイズに調整されます。表示されている行の外側にあるセルは含まれないことに注意してください。

    このアプローチは、初期化後の自動サイズ変更よりもパフォーマンスが最適化されており、特に多数の列のサイズを自動サイズ設定する必要がある場合に推奨されます。

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    スタイル設定

    定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 サイズ変更ハンドルの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>
html

    次に、そのクラスに関連する CSS プロパティを設定します:

    .grid {
    --ig-grid-resize-line-color: #f35b04;
}
css

    デモ

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。