Wijmo 5 (Angular) - ODataCollectionView

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.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.odata.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.grouppanel.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    <h1>ODataCollectionView</h1>
        <p>
            The <b>ODataCollectionView</b> class provides a simple way to connect controls
            to OData sources. When you create an <b>ODataCollectionView</b>, it starts loading
            all the data in the source, given the filtering and paging constraints.</p>
        <p>
        <div class="row">
            <div class="col-md-6">
                <h3>
                    ODataCollectionView</h3>
                    
                <wj-flex-grid 
                    id="groupMultiRow"
                    control="flexCV"
                    is-read-only="true"
                    initialized="initODataCollectionView(s,e)">
                    <wj-flex-grid-column binding="OrderID" header="Order"></wj-flex-grid-column>
                    <wj-flex-grid-column binding="ProductID" header="Product"></wj-flex-grid-column>
                    <wj-flex-grid-column binding="ProductName" header="Name"></wj-flex-grid-column>
                    <wj-flex-grid-column...

JavaScript

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

// controller
app.controller('appCtrl', function ($scope) {
    // NorthWind OData V4 service
    var url = 'http://services.odata.org/V4/Northwind/Northwind.svc';

    // initialize an ODataCollectionView and bind it to a grid
    $scope.initODataCollectionView = function (s, e) {

        // declare collection view
        $scope.data = new wijmo.odata.ODataCollectionView(url, 'Order_Details_Extendeds', {
        		sortOnServer: true,
            filterOnServer: true,
            oDataVersion: 4,
            pageSize: 10,
            groupDescriptions: [ 'Quantity' ],
            collectionChanged: function (s, e) {
                $scope.$apply();
            }
        });

        // use virtual collection as grid data source
        var flex = s;
        flex.itemsSource = $scope.data;

        // add a filter
        var filter = new wijmo.grid.filter.FlexGridFilter(flex);
        
        document.getElementById('nextBtn').addEventListener('click', function (e) {
            $scope.data.moveToNextPage();
        });
        
        document.getElementById('previousBtn').addEventListener('click', function (e) {
            $scope.data.moveToPreviousPage();
        });
    }
});