Databind Wijmo Grid to Data

The CData API Server provides Salesforce data (along with 80+ other sources) as Web services, which enable connectivity to live data. This article shows how to consume JSONP-formatted Salesforce data from a Wijmo Grid.

  1. If you have not already connected successfully in the administration console, see the "Getting Started" chapter in the help documentation for a guide.
  2. Load the required Wijmo, jQuery, and Knockout libraries:
    <script class=lazyload data-src=""></script>
    <script class=lazyload data-src=""></script>
    <link href="" rel="stylesheet" type="text/css">
    <!--Wijmo Widgets CSS-->
    <link href="" rel="stylesheet" type="text/css">
    <!--Wijmo Widgets JavaScript-->
    <script class=lazyload data-src=""></script>
    <script class=lazyload data-src=""></script>
    <script class=lazyload data-src=""></script>
    <!--Knockout JS Library-->
    <!-- Both of the links below can work -->
    <script class=lazyload data-src=""></script> 
    <!--<script class=lazyload data-src=""></script>--> 
    <!--Wijmo Knockout Integration Library-->
    <script class=lazyload data-src=""></script>
  3. Create a ViewModel and connect to it using the ODataView:
    <script id="scriptInit">
    $.support.cors = true;
    var viewModel;
    function ViewModel() {
      var AccountView = new"http://MyServer:MyPort/api.rsc/Account", {
      ajax: {
        dataType: "jsonp", 
        username: "MyUser",
        password: "MyAuthtoken",
        data: { "$inlinecount": null }
      pageSize: 10
      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));
  4. Databind: Below is a simple table with some paging buttons, which you can paste into the body section of your markup.
    <h2>Edit Live Salesforce Data in Real Time</h2>
      <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>
    <table id="demo-grid" data-bind="wijgrid: { 
      data: products, 
      allowEditing: true, 
      showFilter: true, 
      allowPaging: true,
      pagerSettings: { position: 'none'},
      columnsAutogenerationMode: 'append',
    }" >

Below is the resulting grid. You can filter, sort, edit, and save. Paging makes working with large datasets manageable.