Wijmo Grid に Salesforce.com データをデータバインド

CData API Server は、Salesforce データ（さらに 80 を超えるデータソース）を Web サービスとして提供し、ライブデータへの接続を可能にします。この記事では、JSONP 形式の Salesforce データを Wijmo Grid で利用する方法を説明します。

1. まだ管理コンソールで接続に成功していない場合は、ヘルプドキュメントの「はじめに」の章を参照してください。
2. 必要な Wijmo、jQuery、Knockout ライブラリをロードします：

   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
   
   <!--Theme-->
   <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css">
   
   <!--Wijmo Widgets CSS-->
   <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.css" rel="stylesheet" type="text/css">
   
   <!--Wijmo Widgets JavaScript-->
   <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js"></script>
   <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js"></script>
   <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20161.90.js"></script>
   
   <!--Knockout JS Library-->
   <!-- 以下のどちらのリンクも使用可能です -->
   <script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js"></script>
   <!--<script src="http://cdn.wijmo.com/amd-js/3.20161.90/knockout-3.1.0.js"></script>-->
   
   <!--Wijmo Knockout Integration Library-->
   <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20161.90.js"></script>

3. ViewModel を作成し、ODataView を使用して接続します：

   <script id="scriptInit">
   $.support.cors = true;
   var viewModel;
   
   function ViewModel() {
     var AccountView = new wijmo.data.ODataView("http://MyServer:MyPort/api.rsc/Account", {
     ajax: {
       dataType: "jsonp",
       username: "MyUser",
       password: "MyAuthtoken",
       data: { "$inlinecount": null }
     },
     pageSize: 10
   });
     accountView.refresh();
     accountView.nextPage();
     this.account = accountView;
     this.prevPage = function () {accountView.prevPage();};
     this.nextPage = function () {accountView.nextPage();};
   }
   
   $(document).ready(function () {
      viewModel = new ViewModel();
      ko.applyBindings(viewModel, $(".container").get(0));
   });
   </script>

4. データバインド：以下は、ページングボタンを備えたシンプルなテーブルです。マークアップの body セクションに貼り付けてください。

   <h2>ライブ Salesforce データをリアルタイムで編集</h2>
   
   <h3>Account</h3>
   <div>
     <button title="previous page" class="pagebuttons" data-bind="click: prevPage, button: {}"><span class="ui-icon ui-icon-seek-prev" /></button>
     <button title="next page" class="pagebuttons" data-bind="click: nextPage, button: {}"><span class="ui-icon ui-icon-seek-next" /></button>
   </div>
   <table id="demo-grid" data-bind="wijgrid: {
     data: products,
     allowEditing: true,
     showFilter: true,
     allowPaging: true,
     pagerSettings: { position: 'none'},
     columnsAutogenerationMode: 'append',
   }" >
   </table>

以下は完成したグリッドです。フィルタリング、ソート、編集、保存が可能です。ページングにより、大規模なデータセットも扱いやすくなります。