Wijmo UI for the Web
Quick Start
Wijmo User Guide > Data > Quick Start
Show All
Hide All

In this quick start, you will learn how to add the Data module to an HTML project and how to bind data from a local array to a Grid widget using Knockout.

  1. To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.

    Drop down and copy markup

    Paste in your favorite text editor.
    Copy Code 
    <!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
  2. Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

    Drop down and copy references to paste inside the head tags

    References
    Copy Code 
    <!--jQuery References--> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>
  3. Add links to the data references to your HTML page within the <head> tags.
    Note: wijmo.data.ajax.js is a separate file that must be included in order to use OData.
    Data References
    Copy Code 
    <!--Wijmo Ajax Data-->
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20161.90.js" type="text/javascript"></script>
 
<!--Knockout JS Library-->
<!-- Both of the links below can work -->
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script> 
<!--<script src="http://cdn.wijmo.com/amd-js/3.20161.90/knockout-3.1.0.js" type="text/javascript"></script>--> 
  
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20161.90.js" type="text/javascript"></script>
  4. Within the <body> tags, add markup like the following. This markup does a number of things:
    • The first <table> element includes a number of buttons that are bound to the functions we create in the script below.
    • The second <table> element creates the View, a wijgrid widget, and binds it to the data we create in the script below.
    Markup
    Copy Code 
    <h2>Data - Modifiable Remote Data</h2>
    <table>
        <tr>
            <th>Filter</th>
            <td>
                <button data-bind="click: clearFilter">Clear</button>
                <button data-bind="click: filterBeverages">Beverages</button>
                <button data-bind="click: filterCondiments">Condiments</button>
            </td>
        </tr>
        <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 = 4</button>
                <button data-bind="click: prevPage">Previous Page</button>
                <button data-bind="click: nextPage">Next Page</button>
              </td>
        </tr>
        <tr>
             <th>Modify</th>
             <td>
                 <button data-bind="click: add">Add a Product</button>
                 <button data-bind="click: deleteCurrent">Delete Selected Product</button>
                 <button data-bind="click: doublePrice">Double Selected Price</button>
             </td>
        </tr>
    </table>
 
    <h3>Products</h3>
 
    <table id="demo-grid" data-bind="wijgrid: { 
        data: products, 
        allowEditing: true, 
        allowPaging: true, 
        showFilter: true }">
    </table>
  5. Within the <head> tags, below the references, add the following script, which does all of the following:
    • Creates a local array of six products.
    • Creates a ViewModel.
    • Creates the filter functions.
    • Creates the sort functions.
    • Creates the paging functions.
    • Creates the modification functions.
    • Applies the Knockout bindings and activates knockout.js
    Script
    Copy Code 
    <script type="text/javascript">
        var viewModel;
        function sourceData() {
            return [
                { "Product_ID": 1, "Product_Name": "Chai", 
                    "Category_ID": 1, "Quantity_Per_Unit": "10 boxes x 20 bags", "Unit_Price": 18.0 }, 
                { "Product_ID": 2, "Product_Name": "Chang", 
                    "Category_ID": 1, "Quantity_Per_Unit": "24 - 12 oz bottles" }, 
                { "Product_ID": 3, "Product_Name": "Aniseed Syrup", 
                    "Category_ID": 2, "Quantity_Per_Unit": "12 - 550 ml bottles", "Unit_Price": 10.0 }, 
                { "Product_ID": 4, "Product_Name": "Chef Anton's Cajun Seasoning", 
                    "Category_ID": 2, "Quantity_Per_Unit": "48 - 6 oz jars", "Unit_Price": 22.0 }, 
                { "Product_ID": 5, "Product_Name": "Chef Anton's Gumbo Mix", 
                    "Category_ID": 2, "Quantity_Per_Unit": "36 boxes", "Unit_Price": 21.35 }, 
                { "Product_ID": 6, "Product_Name": "Grandma's Boysenberry Spread", 
                    "Category_ID": 2, "Quantity_Per_Unit": "12 - 8 oz jars", "Unit_Price": 25.0 }
           ];
        }
        function ViewModel(sessionId) {
            var productView = new wijmo.data.ArrayDataView(sourceData());
            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");};
            this.clearPaging = function () {productView.pageSize(0);};
            this.setPaging = function () {productView.pageSize(4);};
            this.prevPage = function () {productView.prevPage();};
            this.nextPage = function () {productView.nextPage();};
            this.add = function () {productView.add({
                    Product_ID: 100,
                    Product_Name: "Tomato",
                    Category_ID: 1,
                    Unit_Price: 5
                });
                productView.commitEdit();
            };
            this.deleteCurrent = function () {productView.remove();};
            this.doublePrice = function () {
                productView.editItem();
                productView.currentEditItem().Unit_Price *= 2;
                productView.commitEdit();
            };
        }
 
        $(document).ready(function () {
            viewModel = new ViewModel();
            ko.applyBindings(viewModel);
        });
</script>
  6. Save your HTML file and open it in a browser. The widget appears like the following.
See Also
Data
Data Concepts

KO

KO Grid Binding

How To

Data How To

Reference

wijmo.data Namespace

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page