Web Components Tree Grid サイズ

Ignite UI for Web Components の Web Components Tree Grid サイズ機能を使用すると、ユーザーは IgcTreeGrid 内のデータの間隔とレイアウトを制御できます。--ig-size を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つのサイズ オプションから選択できます。

• --ig-size-large
• --ig-size-medium
• --ig-size-small

Web Components Tree Grid サイズの例

使用方法

上記デモで示されるように、IgcTreeGrid は 3 つのサイズ オプション (small、medium、large) を提供します。以下のコード スニペットは、--ig-size をインラインまたは CSS クラスの一部として設定する方法を示しています。

.gridSize {
    --ig-size: var(--ig-size-medium);
}

<igc-tree-grid id="grid" class="gridSize">
</igc-tree-grid>

各オプションを IgcTreeGrid に反映する方法を紹介します。サイズ オプション間で切り替える際に各 IgcTreeGrid 要素の高さとそのパディングが変更されます。カスタムの列 Width を適用する場合、左右のパディングより大きくする必要があることに注意してください。

• large - これはデフォルトの IgcTreeGrid サイズです。サイズが最も低く、行の高さが 50px です。左と右のパディングが 24px で最小列 Width は 80px です。
• medium - 中サイズで、行の高さは 40px です。左と右のパディングが 16px で最小列 Width は 64px です。
• small - 強度が最も高く、行の高さは 32px です。左と右のパディングが 12px で最小列 Width は 56px です。

引き続きサンプルを使用して、--ig-size の適用方法について説明します。最初に各サイズを切り替えるボタンを追加します。

マークアップを追加します。

<div class="size-chooser">
    <igc-property-editor-panel
    description-type="WebTreeGrid"
    is-horizontal="true"
    is-wrapping-enabled="true"
    name="PropertyEditor"
    id="propertyEditor">
        <igc-property-editor-property-description
        name="SizeEditor"
        id="SizeEditor"
        label="Grid Size:"
        value-type="EnumValue"
        drop-down-names="Small, Medium, Large"
        drop-down-values="Small, Medium, Large">
        </igc-property-editor-property-description>
    </igc-property-editor-panel>
</div>

最後にサイズを適用するためのロジックを実装します。

<igc-tree-grid id="grid" primary-key="ID" foreign-key="ParentID" width="100%"
    height="550px" allow-filtering="true">
    <igc-column field="Name" data-type="String" sortable="true" has-summary="true" width="200px"></igc-column>
    <igc-column-group pinned="false" header="General Information">
        <igc-column field="HireDate" data-type="Date" sortable="true" has-summary="true">
        </igc-column>
        <igc-column-group header="Person Details">
            <igc-column field="ID" data-type="Number" filterable="false"></igc-column>
            <igc-column field="Title" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="Age" data-type="Number" sortable="true" has-summary="true" filterable="false"></igc-column>
        </igc-column-group>
    </igc-column-group>
    <igc-column-group header="Address Information">
        <igc-column-group header="Location">
            <igc-column field="Country" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="City" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="Address" data-type="String" sortable="true" has-summary="true"></igc-column>
        </igc-column-group>
        <igc-column-group header="Contact Information">
            <igc-column field="Phone" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="Fax" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="PostalCode" data-type="String" sortable="true" has-summary="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
    <igc-column-group header="Address Information">
        <igc-column-group header="Location">
            <igc-column field="Country" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="City" data-type="String" sortable="true" has-summary="true"></igc-column>
            <igc-column field="Address" data-type="String" sortable="true" has-summary="true"></igc-column>
        </igc-column-group>
        <igc-column-group header="Contact Information">
            <igc-column field="Phone" data-type="String" sortable="true" resizable="true"></igc-column>
            <igc-column field="Fax" data-type="String" sortable="true" resizable="true"></igc-column>
            <igc-column field="PostalCode" data-type="String" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-tree-grid>

IgcTreeGrid の行の高さを変更するその他のオプションに RowHeight プロパティがあります。このプロパティと --ig-size プションが IgcTreeGrid レイアウトにどのように動作に影響するかを以下で確認できます。

constructor() {
    var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
    var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
    var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
    propertyEditor.componentRenderer = this.renderer;
    propertyEditor.target = this.grid;
    this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
    sizeEditor.changed = this.webGridSetGridSize;
    grid.data = this.data;
}

private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
    if (this._componentRenderer == null) {
        this._componentRenderer = new ComponentRenderer();
        var context = this._componentRenderer.context;
        PropertyEditorPanelDescriptionModule.register(context);
        WebGridDescriptionModule.register(context);
    }
    return this._componentRenderer;
}

public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
    var newVal = (args.newValue as string).toLowerCase();
    var grid = document.getElementById("grid");
    grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}

以下を確認してください。

• RowHeight を指定した場合**、--ig-size CSS 変数は行の高さに影響しません。
• --ig-size は、上記の理由により残りすべての Tree Grid 要素に影響します。

サンプル機能を拡張して RowHeight プロパティを IgcTreeGrid に追加します。

<igc-tree-grid id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true">
</igc-tree-grid>

API リファレンス

その他のリソース

• 仮想化とパフォーマンス

• 編集

• ページング

• フィルタリング

• ソート

• 集計

• 列のピン固定

• 列のサイズ変更

• 選択

• 検索

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

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)