Enabling Column Hiding in Ignite UI for Angular Grid

Ignite UI for Angular Grid は Grid Angular最速です。 高速に動作するだけでなく、アプリケーションでigxGridを使用するのも非常に簡単です。グリッドコンポーネントクラスIgnite UI for Angular igxGridという名前で、テンプレートでは<igx-grid></igx-gridとして使用できます>

Ignite UI for Angular Gridの詳細については、こちらをご覧ください。

ステップ 1: プロジェクトにIgnite UI for Angularを追加するAngular

Angularプロジェクトにigx-gridを追加するには、次の3つの方法があります。

1. 新しいプロジェクトを開始する場合は、Ignite UI CLIを使用してプロジェクトをスキャフォールディングします。コマンドラインオプションを使用して、依存関係のインストールを含むigx-gridを追加できます。
2. 既存のプロジェクトでは、Ignite UI for Angular Toolbox 拡張機能を使用して、プロジェクトに igx-grid を追加できます。
3. npm を使用して、プロジェクトにIgnite UI for Angular依存関係をインストールできます。

ステップ2:igx-gridをAngularプロジェクトに追加する

igxGrid を使用するには、

1. igxGridModule
2. BrowserAnimationModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridModule } from 'igniteui-angular';

インポート後、これら2つのモジュールをModuleの配列をインポートに渡します。次に、igxGrid とバインドするために、コンポーネントにローカル データ ソースを作成しましょう。

getData() {
    return [
        { model: 'BMW', color: 'Black', price: '20000' },
        { model: 'Audi', color: 'Blue', price: '10000' },
        { model: 'Merc', color: 'Red', price: '25000' },
        { model: 'Toyta', color: 'Green', price: '18000' },
        { model: 'GM', color: 'Blye', price: '10000' },
    ];
}

コンポーネントのngOnInitライフサイクルフックで、以下のコードに示すようにgetData()関数からデータを読み取ります。テンプレートのプロパティバインディングを使用して、igxGridのデータソースをlocalDataに設定します。

ngOnInit() {
    this.localData = this.getData();
}

以下のコードリストに示すように、テンプレートにigxGridを追加します。 列の非表示機能を使用できるように列を明示的に構成しています。

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false">
    <igx-column field="model" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

上記のigxGrid;

1. 列は手動で構成されます
2. Datasource is set using [data] property binding to localData
3. 列は手動で構成されるため、autoGenerate は false に設定されます。

アプリケーションを実行するこの時点で、下の画像に示すように、アプリケーションAngular igxGridを取得します。

Step 3:  Enable Column Hiding

グリッドIgnite UI for Angular、グリッドのツールバーに列を隠すUIを配置します。グリッドのツールバードロップダウンを使用して、列を表示または非表示にすることができます。 したがって、最初のステップは、グリッドのshowToolbarをtrueに設定することです。

<igx-grid .... [showToolbar]="true" toolbarTitle="Cars" ...>
 
</igx-grid>

showToolbar を true に設定した後、columnHiding を true に設定する必要があります。

<igx-grid .... [columnHiding]="true" ...>
 
</igx-grid>

showToolbar と columnHiding の組み合わせを設定することで、igxGrid で列の非表示を操作できます。列の非表示と手動の列構成を使用して、igx-gridをすべてまとめると、以下のコードリストに示すようになります。

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
            [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
      <igx-column field="model" header="Maker"></igx-column>
      <igx-column field="color" header="Color"></igx-column>
      <igx-column field="price" header="Price"></igx-column>
</igx-grid>

この時点で、アプリケーションを実行すると、下の画像に示すように igxGrid がレンダリングされます。

[disabledHiding] プロパティを true に設定することで、列の非表示を無効にすることもできます。そのため、以下のコードリストに示すように、列モデルの非表示を無効にすることができます。

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
          [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
    <igx-column field="model" [disableHiding]="true" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

アプリケーションを実行するこの時点で、下の画像に示すように、モデル列を非表示にするために無効にしてレンダリングされたigxGridが見つかります。

列以外にも、多くの IgniteUI for Angular Grid を隠すには多くの機能があり、エンタープライズ アプリケーションに最適なグリッドになります。ここですべての機能を確認してください。

これで、列を非表示にすることは、プロパティ バインディングを設定するのと同じくらい簡単であることがわかりました。この投稿がお役に立てば幸いです。