ロード オン デマンドを構成する (igCombo)

トピックの概要

目的

このトピックでは、igCombo™ コントロールのロード オン デマンド機能を紹介し、コード例を示して、その構成および使用方法について説明します。

前提条件

概念

• ロード オン デマンド

トピック

• igCombo の概要: このトピックでは、igCombo コントロールに関係する概念、たとえば、機能、データ ソースへのバインド、要件、テンプレートといった概念について説明します。

• igCombo の追加: このヘルプ トピックでは、基本的な igCombo コントロールを設定し、クライアントの JSON データおよびサーバーのビジネス オブジェクトのコレクションにバインドする方法を紹介します。jQuery 環境と ASP.NET MVC 環境の両方を対象にしています。

• igCombo をデータにバインド: このトピックでは、igCombo コントロールをデータにバインドする方法と、データ バインドに関する詳細について説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
• ロード オン デマンドの有効化
• ロード オン デマンドの構成
• コード例: ロード オン デマンド、ページングとヘッダーおよびフッター テンプレート
  • 説明
  • フッター テンプレート変数
  • コード
• 関連コンテンツ
  • トピック
  • サンプル

概要

ロード オン デマンド機能の概要

igCombo コントロールは、ロード オン デマンド機能をサポートしています。ロード オン デマンドを有効にすると、サーバーとクライアントの両方で帯域幅と処理のオーバーヘッドが大幅に削減されます。

ロード オン デマンドを有効にすると、まずドロップダウン コンテナーにスクロールバーが表示され、リスト項目の最初のページが表示されます。リストの最後にスクロールすると、非同期コールバックを通じて次の項目ページが取得され、リストの一番下に追加されます。

ロード オン デマンドの有効化

ロード オン デマンドの有効化の概要

デフォルトでは、ロード オン デマンドは無効になっています。この機能を有効にするには、loadOnDemandSettings.enabled オプションを true に設定する必要があります。

JavaScript の場合:

loadOnDemandSettings: { enabled: true }

または

ASPX の場合:

Html.Infragistics().Combo().LoadOnDemandSettings(load => load.Enabled(true))

データをデータ ソースから読み込む間、ドロップダウン リストに読み込みインジケーターが表示されます。データのロードとページ上の表示が完了すると、読み込みインジケーターは削除されます。

ロード オン デマンドの構成

ロード オン デマンドの構成の概要

以下の表は、igCombo コントロールのロード オン デマンドに関する構成可能な項目と、関連するドロップダウン リストのページング機能の一覧を示します。

コード例: ロード オン デマンド、ページングとヘッダーおよびフッター テンプレート

説明

この例では、特定のページ サイズを使用してリモート OData データ ソースに対するロード オン デマンド機能を構成する方法を紹介します。

コードでは、id が "combo" の作成済みの HTML 入力タグ上に igCombo コントロールのインスタンスを作成しています。このコードでは、ドロップダウン リストのページ サイズ初期値が 25 項目に設定されます (pageSize: 25)。responseDataKey、responseTotalRecCountKey、および dataSource オプションは、指定した URL にクエリを実行し、返された JSON オブジェクトの d.results.Results および d.results.Count メンバーを使用してドロップダウン リストを読み込むようコンボに指示する、割り当てられた値です。

headerTemplate オプションには、HTML コードを表す文字列が割り当てられ、ドロップダウン リストの先頭に表示されます。通常これは、例のように CSS クラスで書式設定された単一のタグですが (class=”boxed”)、より複雑な HTML コードの場合もあります。

footerTemplate オプションには、HTML コードを表す文字列が割り当てられ、いくつかの定義済みの変数を実行時に置換できます。これにより、テンプレートのように動作します。そのオプションに割り当てられた文字列が処理されて変数が置換され、ドロップダウン リストの一番下に表示されます。

フッター テンプレート変数

以下の表に、使用可能なフッター テンプレート変数の一覧を示します。

コード

JavaScript の場合:

$("#combo").igCombo({
    loadOnDemandSettings: {
        enabled: true,
        pageSize: 25
    },
    responseDataKey: "d.results.Results",
    responseTotalRecCountKey : "d.results.Count",
    dataSource: 'http://igniteui.com/api/products?&callback=?',
    textKey: "ProductName",
    valueKey: "ID",
    headerTemplate: '<div class="boxed">Available Products</div>',
    footerTemplate: '<div class="boxed">Product Count: {0} of {3}</div>'
});

ASPX の場合:

<%=
    Html.Infragistics().Combo()
        .ID("combo")
        .DataSource("http://igniteui.com/api/products?&callback=?")
        .ResponseDataKey("d.results.Results")
        .ResponseTotalRecCountKey("d.results.Count")
        .TextKey("ProductName")
        .ValueKey("ID")
        .LoadOnDemandSettings(load => load.Enabled(true).PageSize(25))
        .HeaderTemplate("<div class='boxed'>Available Movies</div>")
        .FooterTemplate("<div class='boxed'>Movie Count: {0} of {3}</div>")
        .Render()
%>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• igCombo の構成: このトピックでは、igCombo コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• ロード オン デマンド: このサンプルでは、OData データ ソースを使用して、コンボ ボックスのロード オン デマンド機能とページング機能を使用する方法を紹介します。

• 仮想化: このサンプルでは、UI 仮想化を有効にすると、igCombo コントロールはコンボでデータの大量を効率的に描画する方法を紹介します。

• フィルタリング: このサンプルでは、igCombo コントロールのドロップダウン リストは入力値に基づいてフィルターする方法を紹介します。自動補完およびオート コンプリート機能もサポートされます。