Ignite UI for Angularグリッドでの自動生成された列の操作

Ignite UI for Angular Grid は、利用可能な最速のデータ グリッドです。これにより、アプリケーションの実行が高速化されるだけでなく、開発者としてアプリケーションをより速く作成できるようになります。

実際の動作を確認するには、次のコード リストに示すようなデータ ソースがあると仮定します。

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

上記のデータを igxGrid でレンダリングするには、コンポーネントのテンプレートで igxGrid のインスタンスを定義し、data プロパティを product 配列にバインドするだけです。次のコードリストに示すように、追加するのは簡単です。

<igx-grid [data]="products"
           [autoGenerate]="true"
           width="960px">
 </igx-grid>

データと autoGenerate プロパティのみを設定すると、次に示すように igxGrid でデータがレンダリングされます。

autoGenerate プロパティが true に設定されているため、Ignite UIは既定のプロパティが構成された列を生成します。ただし、Ignite UI for Angular Gridには、次のような多くの機能があります。

• フィルタリング
• ページング
• 仕分け
• 列のピン留め
• 列の非表示
• Column template
• ヘッダーテンプレートなどなど。

開発者は、ビジネス要件に応じてこれらの機能を構成することができます。これを行うには、次の 2 つの方法があります。

1. autoGenerate プロパティを false に設定し、列を手動で構成します。詳細については、こちらをご覧ください。
2. 列が自動的に生成される場合は、コンポーネント クラスで実行時に上記の機能を構成します。

重要な機能は、列が初期化される実行時に構成できます。igxGridComponent Ignite UI for Angular、ColumInitでイベントを提供します。

カラムの初期化時に、onColumnInit イベントが実行されます。この時点で実行したいビジネスロジックは、このイベント内に書き込む必要があります。たとえば、次の画像に示すように、さまざまな機能を有効にするコードを記述できます。

イベントは、次のコード リストに示すように、コンポーネント クラスで処理できます。

特定の列を特定の場所に固定する場合は、次のように実行できます

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Title') {
        column.pin();
    }
}

以下に示すように、タイトル列が左側に固定されています。

初期化中に列を非表示にするには、非表示のプロパティ値を true に設定します。

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Id') {
        column.hidden = true;
    }
}

また、editable プロパティを true に設定することで、列を編集可能にすることもできます。

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'ExpiryDate') {
        column.editable = true;
    }
}

igxGrid がレンダリングされると、次の画像に示すように、ExpiryDate 列が編集可能になります。また、編集モードでは、igxCalandar で日付タイプの列を編集するオプションがIgnite UI提供されることに気付くかもしれません

ご覧のとおり、自動生成された列でさまざまな機能を構成するのは非常に簡単です。 機能を構成するだけでなく、列データを指定した出力に書式設定することもできます。Angularでは、パイプがそれを行います。したがって、自動生成された列の場合は、formatter 関数を使用してパイプを適用します。

あなたがしたいとしましょう、

1. Display ExpiryDate in specific date format
2. タイトルを大文字で表示

そのためには、下の画像に示すように、onColumnInitイベントでフォーマッター関数を使用できます。ここでは、toLocaleDateString を使用して日付出力をローカル日付形式に変換し、toUpperCase を使用して出力を大文字で表示しています。

上記のフォーマッタを適用すると、Title列のデータは大文字でフォーマットされ、ExpiryDate列のデータはローカルの日付文字列形式でフォーマットされていることがわかります。

フォーマッタは、複雑なビジネスロジックにも使用できます。フォーマッタ矢印関数を使用して、複数のステートメントをロジックとして渡すことができます。たとえば、価格列で価格データが 50 未満の場合、価格データの横に「割引」というテキストを追加する必要があります。これは、次の画像に示すように、非常に迅速に行うことができます。

グリッドはIgnite UI for Angular下の画像に示すように、適用されたフォーマッタでレンダリングされます。

前に説明したように、列データをフォーマットするだけでなく、他の機能も利用できます。非常にスムーズに、次のような他のさまざまな操作を実行できます。

• Setting a summary
• フィルターの設定
• フォーマッタの設定
• Setting width
• Setting header value
• ヘッダーテンプレートの設定
• movable property の設定
• Setting hidden attributes etc.

上記の機能については、他のブログ記事で個別に説明します。ただし、このブログで説明したように、Ignite UI for Angularグリッド列が初期化されるときに機能を構成する方法を理解することが重要です。Ignite UI for Angularの30日間の試用版は、こちらからダウンロードできます。この記事がお役に立てば幸いです。