Wijmo 5 - ODataCollectionView

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.70/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.odata.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/interop/angular/wijmo.angular.min.js"></script>
<!-- mark as Angular app with controller -->
<div ng-app="app" ng-controller="appCtrl">
    
    <h3>
        ODataCollectionView
    </h3>
    <b>
        Order Details
    </b>
    <p>
        This table is paged, sorted, and filtered on the server.
    </p>
    <wj-collection-view-pager
          cv="orderDetails">
    </wj-collection-view-pager>
    
    <wj-flex-grid
        items-source="orderDetails" 
        initialized="init(s,e)"
        is-read-only="true">
    </wj-flex-grid>

</div>

CSS

.wj-flexgrid {
    max-height: 500px;
    border: none;
}
.wj-flexchart {
    max-height: 500px;
    border: none;
}
.wj-flexchart .wj-state-selected {
    stroke-dasharray: 0;
    fill: gold;
    stroke: orange;
}

JavaScript

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

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

    // filter by condition and not by value
    // (since we don't have all possible values on the client)
    $scope.init = function(s, e) {
        var f = new wijmo.grid.filter.FlexGridFilter(s);
        f.defaultFilterType = wijmo.grid.filter.FilterType.Condition;
    }
    
    // OData service url
    var url = 'http://services.odata.org/V4/Northwind/Northwind.svc';

    // order details
    $scope.orderDetails = new wijmo.odata.ODataCollectionView(url, 'Order_Details', {
        oDataVersion: 4,
        pageSize: 20,
        loaded: function (s, e) {
            $scope.$apply();
        }
    });
});