グリッドの列非表示

Ignite UI for Angular Data Grid に列非表示機能があります。この機能は UI で列の表示/非表示オプションを提供します。Data Grid に定義済みの列非表示 UI があります。この UI はグリッドのツールバーからアクセスできます。また、列非表示 UI を別のコンポーネントとして定義して、位置を変更することもできます。

デモ


グリッドの設定

グリッドを作成してからデータをバインドします。 列でフィルタリングおよび並べ替えも有効にします。

<!--columnHiding.component.html-->

<igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'ContactName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-grid>

ツールバーの列非表示 UI

定義済みの列非表示 UI はグリッドのツールバーの IgxDropDownComponent 内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。これには、グリッドの showToolbar および columnhiding プロパティを true に設定します。ツールバーが有効でない場合、columnhiding プロパティが有効かどうかは影響しません。ツールバーにタイトルを追加するには、toolbarTitle プロパティを設定し、グリッドのラッパーにカスタム スタイルを設定します。

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid ... [showToolbar]="true" [columnHiding]="true" toolbarTitle="Employees">
        ...
    </igx-grid>
</div>
/* columnHiding.component.css */

.grid__wrapper {
    margin: 20px 150px 0px 150px;
}

グリッドのツールバーの列非表示 UI に便利なプロパティがあります。 columnHidingTitle および hiddenColumnsText プロパティを使用して、ツールバーのドロップダウン ボタンに表示されるタイトルおよびテキストを設定します。hiddenColumnsText は列のカウント数の右に表示されます。カウントはデフォルトでボタンに含まれます。 hiddenColumnsText プロパティはローカライズにも使用できます。

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid ... [showToolbar]="true" [columnHiding]="true" toolbarTitle="Employees" columnHidingTitle="Column Hiding" hiddenColumnsText="Hidden">
        ...
    </igx-grid>
</div>

列非表示 UI の columnsAreaMaxHeight プロパティを使用して列を含む領域の最大の高さを設定できます。列が多すぎてコンテナにすべて収まらない場合にスクロールバーが表示されるため、任意の列に移動できます。検索入力は上にピン固定されて、[すべて表示]/[すべて非表示] ボタンが下にピン固定されます。

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.grid.toolbar.columnHidingUI.columnsAreaMaxHeight = "200px";
}

列非表示 UI の機能セットを使用するには、列非表示 UI コンポーネントへの参照を返すツールバーの columnHidingUI プロパティを使用します。相対する API にアクセスし、アプリケーションの要件に基づいて使用できます。

このトピックの最初にあるコードの結果は「列非表示デモ」セクションで確認できます。

カスタム列の非表示 UI

IgxColumnHidingComponent を手動的に定義してページに配置するには、IgxColumnHidingModule モジュールを追加してコンポーネントのインスタンスをマークアップに作成します。

// app.module.ts

...
import {
    ...
    IgxColumnHidingModule 
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxColumnHidingModule],
})
export class AppModule {}

IgxColumnHidingComponent を作成します。アプリケーションでグリッドの隣に配置します。これはツールバーの列非表示 UI と異なります。ツールバーの場合、コンポーネントはドロップダウンに含まれます。コンポーネントの columns プロパティをグリッドの列に設定し、更にカスタム スタイルも追加します。

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-hiding #columnHidingUI id="columnHidingUI" [columns]="grid.columns">
    </igx-column-hiding>
</div>
<div class="gridContainer">
    <igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-grid>
</div>
/* columnHiding.component.css */

.grid__wrapper {
    margin: 15px;
    display: flex;
    flex-direction: row;
}

.columnHidingContainer {
    min-width: 250px;
    height: 560px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
    igx-column-hiding {
        height: 460px;
    }
}

.columnsOrderOptionsContainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.gridContainer {
    width: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
}

タイトルおよびフィルター プロンプトの追加

列非表示コンポーネント機能を拡張するために title および filterColumnsPrompt プロパティを設定します。title は一番上に表示され、filterColumnsPrompt は列非表示 UI のフィルター入力に表示されるプロンプト テキストです。

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-hiding #columnHidingUI [columns]="grid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-hiding>
</div>

列の表示順序オプションの追加

列非表示 UI で列の表示順序を選択する機能も追加します。このため、columnDisplayOrder プロパティを使用します。列挙型のプロパティで、以下のオプションがあります。

  • Alphabetical (列をアルファベット順で並べ替え)
  • DisplayOrder (列をグリッドで表示される順序によって並べ替え)

このオプションにラジオ ボタンを追加します。IgxRadio モジュールを追加します。

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

次に両方のラジオ ボタンの checked プロパティを異なる条件に個々にバインドして、click イベントを処理します。

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    ...
    <div class="columnsOrderOptionsContainer">
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
                   (click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
            Alphabetical order
        </igx-radio>
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
                   (click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
            Display order
        </igx-radio>
    </div>
</div>

列の非表示の無効化

列の disableHiding プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-grid ... >
        ...
        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-grid>
</div>

列非表示 UI コンポーネントは以下のようになります。


API リファレンス

このトピックでは、グリッドのツールバーの定義済みの列非表示 UI の使用方法や別のコンポーネントとして定義する方法について説明しました。また、その他の列順序から選択する機能を提供する UI を実装し、カスタム タイトルおよびフィルター プロンプト テキストを設定、IgxRadio ボタンのその他の Ignite UI for Angular コンポーネントも使用しました。 以下は、列非表示 UI のその他の API です。

その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:

IgxGridComponent プロパティ:

IgxColumnComponent プロパティ:

IgxGridToolbarComponent プロパティ:

IgxGridToolbarComponent メソッド:

IgxGridComponent イベント:

IgxRadioComponent

スタイル:

その他のリソース

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