<script type="text/javascript">
    var viewModel;

    require(["wijmo.widget", "knockout.wijmo", "wijmo.wijgrid"], function () {
        require(["bootstrap.wijmo"], function () {
            function ViewModel() {
                var productsView = new wijmo.data.ArrayDataView(getData(25), {
                    pageSize: 10
                });

                this.products = productsView;
                this.clearPaging = function () {
                    productsView.pageSize(0);
                };
                this.setPaging = function () {
                    productsView.pageSize(10);
                };
                this.prevPage = function () {
                    productsView.prevPage();
                };
                this.nextPage = function () {
                    productsView.nextPage();
                };
            }

            // random data generators
            function getData(count) {
                var data = [];
                var name = "Lorem,Ipsum,Dolor,Amet,Consectetur,Adipiscing,Elit,Vivamus,Pharetra,Velit,Eget,Imperdiet,Mattis,Egestas,Donec,Tempus,Vestibulum,Tincidunt,Blandit,Lacinia,Lobortis,Feugiat,Mauris,Massa,Rutrum,Pulvinar,Ornare,Facilisi,Sociis,Natoque,Penatibus".split(",");
                var suffix = "LLC,Inc,International,Transpacific,Services,Financial,Enterprises,Consultants,Foundation,Institute".split(",");
                for (var i = 0; i < count; i++) {
                    data.push({
                        TransactionID: i,
                        ProductName: getString(name) + " " + getString(suffix),
                        UnitPrice: getNumber(10, 100),
                        Quantity: Math.floor(getNumber(1, 500)),
                        Discount: getNumber(0, 0.3),
                        OrderDate: getDate(i),
                        Overseas: Math.random() > 0.8
                    });
                }
                return data;
            }
            function getString(arr) {
                return arr[Math.floor((Math.random() * arr.length))];
            }
            function getNumber(lo, hi) {
                return lo + Math.random() * (hi - lo);
            }
            function getDate(daysAgo) {
                return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
            }

            $(document).ready(function () {
                viewModel = new ViewModel();
                ko.applyBindings(viewModel);
            });

        });
        
  });
</script>