Wijmo UI for the Web
Use an Ajax DataView
Show All
Hide All

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

  1. 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">
    var viewModel;
    require(["wijmo.data.ajax", "wijmo.wijgrid", "wijmo.wijpopup", "knockout.wijmo"], function () {
        $.support.cors = true;

        $("#popupEle").wijpopup({
            autoHide: true,
            showEffect: 'blind',
            hideEffect: 'blind'
        });

    function ViewModel(sessionId) {
        var productView = new wijmo.data.AjaxDataView("http://demo.componentone.com/aspnet/NorthwindAPI/api/read/Product", {
            pageSize: 10,
            ajax: { crossOrigin: true }
        });
        productView.refresh();

        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();
        };
        this.refresh = function () {
            productView.refresh().then(
                function(){
                    showPopup("Refresh Success!");
                },
                function () {
                    showPopup("Refresh Fail!");
                }
            )
        };
    }

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

    function showPopup(refreshResult) {
        $("#popupEle").html("<h1 style='color:red'>" + refreshResult + "</h1>");
        $("#popupEle").wijpopup("show", {
            of: $("#demo-grid"),
            my: "center top",
            at: "center top"
        });

        setTimeout(function () {
            $("#popupEle").wijpopup("hide");
        }, 1500);
    }

    if (ko.dependencyDetection) {
        ko.dependencyDetection.ignore(bind);
    } else {
        bind();
    }
    });
</script>
  2. 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 
    <div class="container">
    <div class="header">
        <h2>Data - Rest service</h2>
    </div>
    <div class="main demo">
        <!-- Begin demo markup -->
        <table>
            <tr>
                <th>Sort</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">pageSize = 0</button>
                    <button data-bind="click:setPaging, button: {}" type="button">pageSize = 10</button>
                    <button data-bind="click:prevPage, button: {}" type="button">prev</button>
                    <button data-bind="click:nextPage, button: {}" type="button">next</button>
                </td>
            </tr>
            <tr>
                <th>Refresh</th>
                <td><button data-bind="click: refresh, button: {}" type="button">Refresh</button></td>
            </tr>
        </table>

        <!--<h3>Products. page #<span data-bind='text: products.pageIndex() + 1'></span>/<span data-bind='text: products.totalPages()'></span></h3>-->
        <div id="popupEle"></div>
        <table id="demo-grid" data-bind="wijgrid: { data: products, allowEditing: true, showFilter: true, columns: [
            { headerText: 'ID', dataKey: 'Product_ID' },
            { headerText: 'Product name', dataKey: 'Product_Name' },
            { headerText: 'Category ID', dataKey: 'Category_ID' },
            { headerText: 'Price', dataKey: 'Unit_Price' }
            ]}" >
        </table>
        <!-- End demo markup -->
        <div class="demo-options">
            <!-- Begin options markup -->
            <!-- End options markup -->
        </div>
    </div>
    <div class="footer demo-description">
        <p>
            The sample shows remote data in a wijmo grid.
            The data can be programmatically paged, filtered and sorted by clicking buttons.
            Everytime a button is clicked, a request is sent to the server.
        </p>
        <p>
            To use ODataView or AjaxDataView you need to add the wijmo.data.ajax.js dependency. This is not included in our combined file and must be added separately. Read our <a href="http://wijmo.com/docs/wijmo/#DataQuickStart.html">Data Quick Start</a> to see the references to use.
        </p>
    </div>
</div>
  3. Within the <head> tags, above the script to initialize the widget, set the size of the widget using CSS.

    Drop down and copy markup to paste inside the head tags

                
    Style
    Copy Code 
    <style type="text/css">
    table {
        border-collapse: collapse;
    }
    table caption {
        font-size: 150%;
    }
    th, td {
        border: 1px solid #AAAAAA;
        text-align: center;
        padding: 0.5em;
    }
    th {
        background-color: #CCCCCC;
    }
</style>
  4. Save your HTML file and open it in a browser. The grid appears like the live widget below.

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page