Ignite UI グリッドを使用しアプリケーションを素早く構築

始めに

Ignite UI for JavaScript/HTML5 and ASP.NET MVC を使用し、Web アプリケーションを素早く構築しましょう。Ignite UI for JavaScript を使用すると、HTML5、jQuery、Angular、React、または ASP.NET MVC プラットフォームで複雑な業務要件を解決するアプリケーションを構築できます。Ignite UI for JavaScript を使用し、多くの機能 (改ページ、並べ替え、検索、仮想化など) を含む高速かつ、レスポンシブ グリッドを数行のコードで追加することができます。また、Ignite UI for JavaScript は、データ可視化や様々なフレームワークの要素を含むコントロールを数多くそろえています。これらのコンポーネントを利用することで Web アプリケーションを迅速に開発することが可能になります。

大量のデータをシームレスにレンダリングするだけでなく、Ignite UI for JavaScript Grid には、フィルタ処理、ページング、ソートなど、多くの機能を有しています。詳細については Ignite UI for JavaScript 製品ページをご覧ください。

レッスンの目的

  1. Ignite UI for JavaScript グリッド コントロールを追加
  2. グリッドの列の定義

コントロールの詳細については Ignite UI データ グリッドをご覧ください。

このレッスンの最後に列の定義が行われているグリッドが Angular アプリケーションに追加されます。Ignite UI for JavaScript を Angular で使用するための詳細については Ignite UI for JavaScript Angular コンポーネント ページをご覧ください。

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

  • npm install
  • npm start

npm install コマンドを実行することで全ての依存する項目がインストールされます。npm start コマンドを実行することで Angular アプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行されます。

Setting up project with Ignite Grid

手順1: コンポーネントのインポートと宣言

Ignite UI for JavaScript Angular コンポーネントを使用する場合、モジュールへのインポートと宣言が必要になります。例えば igGrid コンポーネントを Angular アプリケーションで利用する場合は、アプリケーション モジュールで IgGridComponent をインポートし、宣言します。

このプロジェクトの Finance App フォルダー、app フォルダーに移動します。app.module.ts ファイルを開き、既に存在しているインポートの記述の後に、下記のコードを追加します。 

import{IgGridComponent} from 'igniteui-angular2';
import {GridComponent} from './grid.component';

インポート後、アプリケーション モジュールで宣言をする必要があります。IgGridComponent と GridComponent を AppModule の宣言配列に追加します。app.module.ts の @NgModule デコレーターを下記のように変更します。

@NgModule({
imports: [BrowserModule,HttpModule],
declarations: [AppComponent,
              IgZoombarComponent,
              IgDataChartComponent,
              PriceChartComponent,
              InfoComponent,
              IndicatorChartComponent,
              VolumeChartComponent,
              IgGridComponent, GridComponent],
              providers: [AppService],
              bootstrap: [AppComponent]
})
export class AppModule { }

これで igGridComponent と GridComponent が AppModule モジュールの宣言配列に追加されました。同様の作業をこの後のチュートリアルでも行います。

手順2: データ ソースの作成

グリッドにバインドするデータは ローカル、あるいは REST サービスで提供される JavaScript 配列、JSON 配列となります。

複数のコンポーネントでデータ関数を使用できるように、Angular サービスでデータを返す関数を作成するのが理想的です。ただし、このレッスンでは、GridComponent クラスに getdata という関数が既に存在しています。この関数は、JSON オブジェクト配列を返します

app フォルダの grid.component.ts ファイルを開き、getData() 関数を確認します。以降のレッスンでは、REST サービスのデータを使用するグリッドを作成する方法について説明します。

手順3: データの取得

getData () 関数から返されるデータを使用するには、Angular の ngOnInit () ライフ サイクル フック内で関数を呼び出し、返された値を GridComponent プロパティに割り当てます。

詳細については Lifecycle Hooks をご覧ください。

app フォルダー内の grid.component.ts ファイルを開き、ngOnInit() 関数を下記のように変更します。

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

手順4: グリッドの作成

Ignite UI for JavaScript グリッド コンポーネントは他のコンポーネントと同様に使用することができます。grid.component.html を開き、下記のように変更します。

<ig-grid widgetId="grid1" [dataSource]="stocks" [autoGenerateColumns]="true">

手順5: アプリケーションで使用

GridComponent をアプリケーションで使用するため、app.component.html ファイルを開き、下記のコードをマークアップの最後に追加します。

<grid></grid>

アプリケーションを実行し、ページ下部にスクロールすることでグリッドが表示されていることを確認できます。

Use Ignite Grid in an application

手順 6: グリッドの列を定義

手順 4 では、autoGenerateColumns プロパティを true に設定してグリッドを作成しました。この場合、グリッドの列を構成する必要はなく、自動的に生成されます。

ただし、多くの場合、列を手動で構成する必要があります。コンポーネント クラスでグリッドのページング、並べ替え、フィルター処理などの列およびその他の機能を構成できます。

列を構成するには、app の grid.component.ts  ファイルを開き ngOnInit () 関数を更新します。

ngOnInit() {
  this.stocks = this.getData();
  this.gridId = "Grid1";
  this.gridOptions = {
    dataSource: this.stocks,
    autoGenerateColumns: false,
    columns: [
        { headerText: "CLOSE", key: "Close", dataType: "number" },
        { headerText: "DATE", key: "Date", dataType: "string" },
        { headerText: "HIGH", key: "High", dataType: "number" },
        { headerText: "LOW", key: "Low", dataType: "number" },
        { headerText: "OPEN", key: "Open", dataType: "number" },
        { headerText: "VOLUME", key: "Volume", dataType: "number" }
    ]
  }
}

手順 7: 定義された列をグリッドで変更

Ignite UI for JavaScript Angular グリッドのオプションと widgetId プロパティは双方向のデータバインディングに対して有効になっているため、ソース内の変更はすべてグリッドに反映されます。オプションと widgetid プロパティを設定するには、grid.component.html を開き、下記のように変更します。

<ig-grid [(options)]= "gridOptions" [(widgetId)]="gridId">

再度アプリケーションを実行し、グリッドを表示させるとグリッドの列ヘッダが定義したように変更されていることを確認できます。

Modify Grid with configured columns

結びに

Ignite UI for JavaScritpt は Web アプリケーションを素早く構築するのに役立ちます。Angular に加え、Ignite UI for JavaScript は、React、AngularJS、jQuery、ASP.NET で使用することができます。