React Tree Grid サイズ

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

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

React Tree Grid サイズの例

使用方法

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

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

<IgrTreeGrid className="gridSize"></IgrTreeGrid>

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

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

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

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

<IgrPropertyEditorPanel
    ref={propertyEditorRef}
    componentRenderer={renderer}
    target={grid}
    descriptionType="WebTreeGrid"
    isHorizontal={true}
    isWrappingEnabled={true}>
    <IgrPropertyEditorPropertyDescription
        name="SizeEditor"
        label="Grid Size:"
        valueType="EnumValue"
        dropDownNames={["Small", "Medium", "Large"]}
        dropDownValues={["Small", "Medium", "Large"]}
        changed={webGridSetGridSize}>
    </IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>

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

<IgrTreeGrid autoGenerate={false} ref={treeGridRef} data={employeesFlatDetails} primaryKey="ID" foreignKey="ParentID" allowFiltering={true}>
    <IgrColumn field="Name" dataType="string" sortable={true} hasSummary={true} width="200"></IgrColumn>
    <IgrColumnGroup header="General Information">
        <IgrColumn field="HireDate" dataType="date" sortable={true} hasSummary={true}></IgrColumn>
        <IgrColumnGroup header="Personal Details">
            <IgrColumn field="ID" dataType="number" filterable={false}></IgrColumn>
            <IgrColumn field="Title" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
            <IgrColumn field="Age" dataType="number" sortable={true} hasSummary={true} filterable={false}></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
    <IgrColumnGroup header="Address Information">
        <IgrColumnGroup header="Location">
            <IgrColumn field="Country" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
            <IgrColumn field="City" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
            <IgrColumn field="Address" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
        </IgrColumnGroup>
        <IgrColumnGroup header="Contact Information">
            <IgrColumn field="Phone" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
            <IgrColumn field="Fax" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
            <IgrColumn field="PostalCode" dataType="string" sortable={true} hasSummary={true}></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrTreeGrid>

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

private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
        this.propertyEditor = r;
        this.setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private grid: IgrTreeGrid
private gridRef(r: IgrTreeGrid) {
    this.grid = r;
    this.setState({});
}

constructor(props: any) {
    super(props);

    this.propertyEditorRef = this.propertyEditorRef.bind(this);
    this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
    this.gridRef = this.gridRef.bind(this);
}

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

public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): 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 プロパティを IgrTreeGrid に追加します。

<IgrTreeGrid #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true">
</IgrTreeGrid>

<IgrTreeGrid
   @ref="grid"
   Id="grid"
   Class="gridSize"
   Width="100%"
   Height="100%"
   AutoGenerate="true"
   Data="northwindEmployees"
   RowHeight="rowHeight">
</IgrTreeGrid>








```tsx
<IgrTreeGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrTreeGrid>

API リファレンス

その他のリソース

• 仮想化とパフォーマンス
• 編集
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択
• 検索

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

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