Bind wijgrid to a DataView

Building on the Grid Quick Start example, you can create an AjaxDataView object, and bind to it using the grid's data option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the data option to create an AjaxDataView object, and uses IAjaxDataViewOptions fields to set the ajax data, number of records per page (pageSize), onRequest, and onResponse settings. We also set the allowPaging option on the grid to true so that our pageSize setting can take effect. Copy the following script and paste it in the <head> section

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid", "wijmo.data.ajax", "knockout.wijmo"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ data: new wijmo.data.AjaxDataView("http://ws.geonames.org/searchJSON", { ajax: { dataType: "jsonp", data: { username: "wijmowidgets", style: "SHORT" } }, pageSize: 10, onRequest: function (settings, shape) { settings.data.startRow = shape.pageSize * shape.pageIndex; settings.data.maxRows = shape.pageSize; }, onResponse: function (response) { return { totalItemCount: response.totalResultsCount, results: response.geonames }; } }), allowPaging: true }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid", "wijmo.data.ajax", "knockout.wijmo"], function () {
    $(document).ready(function () {
    $("#wijgrid").wijgrid({
        data: new wijmo.data.AjaxDataView("http://ws.geonames.org/searchJSON", 
        { 
            ajax: { 
                dataType: "jsonp", 
                data: { 
                    username: "wijmowidgets", 
                    style: "SHORT"
                } 
            }, 
            pageSize: 10,
            onRequest: function (settings, shape) { 
                settings.data.startRow = shape.pageSize * shape.pageIndex; 
                settings.data.maxRows = shape.pageSize; 
            }, 
            onResponse: function (response) { 
                return { 
                    totalItemCount: response.totalResultsCount, 
                    results: response.geonames 
                }; 
            }
        }),
        allowPaging: true
    });
    });
    });
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with page buttons along the bottom, and the data bound to a remote source.