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.
- Sets the ajax crossOrigin property to true to allow cross-domain requests.
- Sorts the data on refresh.
- Sets up the following functions to use in button click events:
- 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.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.
Drop down and copy code
| 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.
See Also
Concepts
Data
Reference
Show All
Hide All