Use a RESTful Web Service

Building on the Quick Start example, you can use the Data module to connect to a RESTful 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 AjaxDataView.
- Sets the number of records per page to 10 using the pageSize option.
- Sets the ajax crossOrigin property to true to allow cross-domain requests.
- Sorts the data using the refresh method. See Promises for more information.
- Sets up the following functions to use in button click events:
  - Sorts on Product ID or Price using the sort 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.AjaxDataView("http://demo.componentone.com/aspnet/NorthwindAPI/api/read/Product", { pageSize: 10, ajax: { crossOrigin: true } }); productView.refresh({ sort: "Product_ID" }); this.products = productView; 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.AjaxDataView("http://demo.componentone.com/aspnet/NorthwindAPI/api/read/Product", {
            pageSize: 10,
            ajax: { crossOrigin: true }
        });
        productView.refresh({ sort: "Product_ID" });
 
        this.products = productView;
 
        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>Sort By</th> <td> <button data-bind="click:sortId">ID</button> <button data-bind="click:sortPrice">Price</button> </td> </tr> <tr> <th>Pages</th> <td> <button data-bind="click:clearPaging">Clear Paging</button> <button data-bind="click:setPaging">Page Size = 10</button> <button data-bind="click:prevPage">Previous Page</button> <button data-bind="click:nextPage">Next Page</button> </td> </tr> </table> <h3>Products</h3> <table id="demo-grid" data-bind="wijgrid: { data: products, allowEditing: true, showFilter: true, columnsAutogenerationMode: 'none', columns: [ { headerText: 'ID', dataKey: 'Product_ID' }, { headerText: 'Product name', dataKey: 'Product_Name' }, { headerText: 'Category ID', dataKey: 'Category_ID' }, { headerText: 'Price', dataKey: 'Unit_Price', width: 100 } ]}" > </table>

Grid Markup

Copy Code

    <h2>Data - Modifiable Remote Data</h2>
    <table>
        <tr>
            <th>Sort By</th>
            <td>
                <button data-bind="click:sortId">ID</button>
                <button data-bind="click:sortPrice">Price</button>
            </td>
        </tr>
        <tr>
            <th>Pages</th>
            <td>
                <button data-bind="click:clearPaging">Clear Paging</button>
                <button data-bind="click:setPaging">Page Size = 10</button>
                <button data-bind="click:prevPage">Previous Page</button>
                <button data-bind="click:nextPage">Next Page</button>
            </td>
        </tr>
    </table>
<h3>Products</h3>
    <table id="demo-grid" data-bind="wijgrid: { data: products, allowEditing: true, showFilter: true, columnsAutogenerationMode: 'none', columns: [
        { headerText: 'ID', dataKey: 'Product_ID' },
        { headerText: 'Product name', dataKey: 'Product_Name' },
        { headerText: 'Category ID', dataKey: 'Category_ID' },
        { headerText: 'Price', dataKey: 'Unit_Price', width: 100 }
        ]}" >
    </table>

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

Reference

Data

Promises