Wijmo 5 - OData Example

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.odata.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20153.102/styles/wijmo.min.css">
<div ng-app="app" ng-controller="appCtrl">

    <h3>ODataCollectionView filtering</h3>
    
    <wj-flex-grid items-source="orderDetails" initialized="init(s,e)" is-read-only="true">
        
        <wj-flex-grid-column binding="OrderDate" header="Date" width="200" format="MM/dd/yyyy"></wj-flex-grid-column>
       
    </wj-flex-grid>
</div>

JavaScript

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

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

    // add filter to FlexGrid
    $scope.init = function (s, e) {
        var f = new wijmo.grid.filter.FlexGridFilter(s);
    }

    // OData service url
    var url = 'http://services.odata.org/V4/Northwind/Northwind.svc';

    // order details
    $scope.orderDetails = new wijmo.odata.ODataCollectionView(url, 'Orders', {
        oDataVersion: 4,
        pageSize: 20,
        filterOnServer: false,
        dataTypes: {
            OrderDate: wijmo.DataType.Date
        },
        collectionChanged: function (s, e) {
        	$scope.$apply();
        }
    });
});