ig.RemoteDataSource

ig.RemoteDataSource_image

RemoteDataSource は DataSource クラスを拡張したものであり、デフォルトで、タイプ オプションを「remoteUrl」に設定します。RemoteDataSource コンポーネントの API の詳細については、基本 DataSource コンポーネントの API マニュアルを参照してください。この API のクラス、オプション、イベント、メソッドおよびテーマの詳細については、上記の関連するタブを参照してください。

以下のコードは、RemoteDataSource コントロールの初期化方法を示します。

この API を使用した作業方法の詳細についてはここをクリックしてください。RemoteDataSource コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
 
    <script type="text/javascript">
    $(function () {
        var remoteDataSource = new $.ig.RemoteDataSource({
            responseDataType: "jsonp",
            dataSource: 'http://services.odata.org/OData/OData.svc/Categories?$expand=Products&$format=json&$callback=?',
            responseDataKey: "value"
        });
 
        $("#gridRemoteJSON").igHierarchicalGrid({
            odata: false,
            initialDataBindDepth: 1,
            dataSource: remoteDataSource,
            responseDataKey: 'value',
 
            autoGenerateColumns: false,
            primaryKey: "ID",
            columns: [
                { headerText: "ID", key: "ID", width: "50px", dataType: "number" },
                { headerText: "Name", key: "Name", width: "130px", dataType: "string" }
            ],
            autoGenerateLayouts: false,
            defaultChildrenDataProperty: "Products",
            columnLayouts: [
                {
                    key: "Products",
                    autoGenerateColumns: false,
                    primaryKey: "ID",
                    columns: [
                        { key: "ID", headerText: "ID", width: "25px" },
                        { key: "Name", headerText: "Product Name", width: "90px" },
                        { key: "Price", headerText: "Price", dataType: "number", width: "55px" }
                    ]
                }
            ]
        });
    });
    </script>
</head>
<body>
    <table id="gridRemoteJSON"></table>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
infragistics.util.js
infragistics.util.jquery.js

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.