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 number of records per page to 10 using pageSize.
- Sets the ajax dataType property to jsonp to allow cross-domain requests.
Refreshes the data.
Sets up the following functions to use in button click events:
- Filters on Category ID or clears filters.
- Sorts on Product ID or Price.
- Sets the number of products per page to 10, or clears paging to show all (0).
- Goes to the previous or next page.
Binds the ViewModel to the container.

Drop down and copy code

ViewModel Script	Copy Code
<script id="scriptInit" type="text/javascript"> $.support.cors = true; var viewModel; function ViewModel() { var productView = new wijmo.data.ODataView("http://demo.componentone.com/aspnet/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.

Drop down and copy code

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

See Also