Use an OData Web Service

Building on the Quick Start example, you can use the Data module to connect to a general OData web service.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Creates a ViewModel with the following properties:
- Connects to a data source using the ODataView.
- Sets the ajax dataType property to jsonp to allow cross-domain requests.
- Sets the ajax data property to "$inlinecount": null so that the response does not include a count of the entries in the collection.
- Sets the number of records per page to 10 using the pageSize option.
- Refreshes the data using the refresh method.
Sets up the following functions to use in button click events:
- Filters on Category ID or clears filters using the filter option.
- Sorts on Product ID or Price using thesort option.
- Sets the number of products per page to 10, or clears paging to show all (0) using the pageSize option.
- Goes to the previous or next page using the prevPage and nextPage methods.
Binds the ViewModel to the container using KnockOut.

ViewModel Script	Copy Code
<script id="scriptInit" type="text/javascript"> $.support.cors = true; var viewModel; function ViewModel() { var productView = new wijmo.data.ODataView("http://services.odata.org/V2/Northwind/Northwind.svc/Products", { ajax: { dataType: "jsonp", data: { "$inlinecount": null }, }, pageSize: 10 }); productView.refresh(); this.products = productView; this.clearFilter = function () {productView.filter(null);}; this.filterBeverages = function () {productView.filter({ Category_ID: 1 });}; this.filterCondiments = function () {productView.filter({ Category_ID: 2 });}; this.sortId = function () {productView.sort("Product_ID");}; this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");}; this.clearPaging = function () {productView.pageSize(0);}; this.setPaging = function () {productView.pageSize(10);}; this.prevPage = function () {productView.prevPage();}; this.nextPage = function () {productView.nextPage();}; } $(document).ready(function () { viewModel = new ViewModel(); ko.applyBindings(viewModel, $(".container").get(0)); }); </script>

ViewModel Script

Copy Code

 <script id="scriptInit" type="text/javascript">
     $.support.cors = true;
     var viewModel;
 
     function ViewModel() {
         var productView = new wijmo.data.ODataView("http://services.odata.org/V2/Northwind/Northwind.svc/Products", {
             ajax: {
                 dataType: "jsonp", 
                 data: { "$inlinecount": null },
             },
             pageSize: 10
         });
         productView.refresh();
 
         this.products = productView;
 
         this.clearFilter = function () {productView.filter(null);};
         this.filterBeverages = function () {productView.filter({ Category_ID: 1 });};
         this.filterCondiments = function () {productView.filter({ Category_ID: 2 });};
         this.sortId = function () {productView.sort("Product_ID");};
         this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");};
         this.clearPaging = function () {productView.pageSize(0);};
         this.setPaging = function () {productView.pageSize(10);};
         this.prevPage = function () {productView.prevPage();};
         this.nextPage = function () {productView.nextPage();};
     }

         $(document).ready(function () {
             viewModel = new ViewModel();
             ko.applyBindings(viewModel, $(".container").get(0));
         });
     
</script>

In the <body> section of your HTML file, replace the markup with this, which does the following:

Creates a table with buttons and binds the button click events to the functions in the script.
Creates a second table with a Grid widget, and binds the data to it.

Grid Markup	Copy Code
<h2>Data - Modifiable Remote Data</h2> <table> <tr> <th>Filter</th> <td> <button data-bind="click:filterBeverages, button: {}" type="button">Beverages</button> <button data-bind="click:filterCondiments, button: {}" type="button">Condiments</button> </td> </tr> <tr> <th>Sort By</th> <td> <button data-bind="click:sortId, button: {}" type="button">ID</button> <button data-bind="click:sortPrice, button: {}" type="button">Price, Name</button> </td> </tr> <tr> <th>Pages</th> <td> <button data-bind="click:clearPaging, button: {}" type="button">Clear Paging</button> <button data-bind="click:setPaging, button: {}" type="button">Page Size = 10</button> <button data-bind="click:prevPage, button: {}" type="button">Previous Page</button> <button data-bind="click:nextPage, button: {}" type="button">Next Page</button> </td> </tr> </table> <h3>Products</h3> <table id="demo-grid" data-bind="wijgrid: { data: products, allowEditing: true, allowSorting: true, showFilter: true, allowPaging: true, pagerSettings: { position: 'top' }, columnsAutogenerationMode: 'none', columns: [ { headerText: 'ID', dataKey: 'ProductID' }, { headerText: 'Product Name', dataKey: 'ProductName' }, { headerText: 'Category ID', dataKey: 'CategoryID' }, { headerText: 'Unit Price', dataKey: 'UnitPrice', dataType: 'number', width: 200 } ] }" > </table>

Grid Markup

Copy Code

<h2>Data - Modifiable Remote Data</h2>
<table>
    <tr>
        <th>Filter</th>
        <td>
            <button data-bind="click:filterBeverages, button: {}" type="button">Beverages</button>
            <button data-bind="click:filterCondiments, button: {}" type="button">Condiments</button>
        </td>
    </tr>
    <tr>
        <th>Sort By</th>
        <td>
            <button data-bind="click:sortId, button: {}" type="button">ID</button>
            <button data-bind="click:sortPrice, button: {}" type="button">Price, Name</button>
        </td>
    </tr>
    <tr>
        <th>Pages</th>
        <td>
            <button data-bind="click:clearPaging, button: {}" type="button">Clear Paging</button>
            <button data-bind="click:setPaging, button: {}" type="button">Page Size = 10</button>
            <button data-bind="click:prevPage, button: {}" type="button">Previous Page</button>
            <button data-bind="click:nextPage, button: {}" type="button">Next Page</button>
        </td>
    </tr>
</table>
<h3>Products</h3>
 
<table id="demo-grid" data-bind="wijgrid: { 
    data: products, 
    allowEditing: true, 
    allowSorting: true, 
    showFilter: true, 
    allowPaging: true,
    pagerSettings: { position: 'top' },
    columnsAutogenerationMode: 'none',
    columns: [
        { headerText: 'ID', dataKey: 'ProductID' },
        { headerText: 'Product Name', dataKey: 'ProductName' },
        { headerText: 'Category ID', dataKey: 'CategoryID' },
        { headerText: 'Unit Price', dataKey: 'UnitPrice', dataType: 'number', width: 200 }
    ] }" >
</table>

Save your HTML file and open it in a browser. The grid appears like the live widget below.

Reference

wijmo.data Namespace

ODataView Class

pageSize Option

Data

Quick Start