Porting From Silverlight

HTML5 version of a classic Microsoft Silverlight sample

by Ross Dederer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/interop/angular/wijmo.angular.min.js"></script>
<body ng-app="app" ng-controller="appCtrl">

    <!-- header -->
    <div class="header">
        <div class="container">
            <h1>
                DataServices QuickStart Sample
            </h1>
            <p>
                This is an HTML5 version of a classic Microsoft Silverlight sample available on
                <a href="http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/#/?sref=DataServicesQuickStart">MSDN</a>.
                To see the original Silverlight sample, click 
                <a href="http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/ClientBin/DataServicesQuickStart.html" target="_blank">here</a>.
            </p>
        </div>
    </div>

    <!-- body -->
    <div class="container">

        <!-- commands/details -->
        <dl class="col-md-6 dl-horizontal">
            <dt></dt>
            <dd>
                <button 
                    type="button"
                    class="btn btn-success"
                    style="min-width:120px"
                    ng-click="startButton_Click()">
                    Start
                </button>
            </dd>
            <dt>
                OrderID:
            </dt>
            <dd>
                <wj-combo-box
                    is-editable="false"
                    items-source="orders"
                    display-member-path="OrderID">
               ...

CSS

/* overall page appearance */
body {
    background-color: #f8f8f8;
    font-family: -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}
dd {
    margin-bottom: 4px;
}
.header {
    background-color: #cbe0ea;
    margin-bottom: 14px;
    padding: 12px 0px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// declare app controller
app.controller('appCtrl', function appCtrl($scope) {

    $scope.startButton_Click = function () {

        // URL to Northwind service
        var svcUrl = 'http://services.odata.org/Northwind/Northwind.svc';

        // clear query history
        $scope.queryResources = [];

        // create customers, orders, details view
        $scope.customers = new wijmo.collections.CollectionView();
        $scope.orders = new wijmo.collections.CollectionView();
        $scope.details = new wijmo.collections.CollectionView();

        // when the current customer changes, get his orders
        $scope.customers.currentChanged.addHandler(function () {
            $scope.orders.sourceCollection = [];
            $scope.details.sourceCollection = [];
            var customer = $scope.customers.currentItem;
            if (customer) {
                loadData(svcUrl, $scope.orders, 'Customers(\'' + customer.CustomerID + '\')/Orders', {
                    OrderDate: wijmo.DataType.Date,
                    RequiredDate: wijmo.DataType.Date,
                    ShippedDate: wijmo.DataType.Date,
                    Freight: wijmo.DataType.Number
                });
            }
        });

        // when the current order changes, get the order details
        $scope.orders.currentChanged.addHandler(function () {
            $scope.details.sourceCollection = [];
            var order = $scope.orders.currentItem;
            if (order) {
                loadData(svcUrl, $scope.details, 'Orders(' + order.OrderID + ')/Order_Details', {
                    UnitPrice: wijmo.DataType.Number
                });
            }
        });

        // load the customers.
        loadData(svcUrl, $scope.customers, 'Customers');

        // utility to load OData into a CollectionView
        function loadData(baseUrl, view, table, types) {

            // build url
           ...