Wijmo 5 [ Flex Grid ]

Pinned Rows Sorting

by Joel Parks

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js"></script>
 <!-- mark this as an Angular application and give it a controller -->
    <div ng-app="app" ng-controller="appCtrl">
        <wj-flex-grid items-source="data" updated-view="init(s,e)" sorted-column="sortedColumn(s,e)" style="height:400px;">
            <wj-flex-grid-column header="PIN" binding="pin" allow-sorting="false" ></wj-flex-grid-column>
            <wj-flex-grid-column header="Name" binding="name"></wj-flex-grid-column>
            <wj-flex-grid-column header="count" binding="count"></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) {
            // create some data
            $scope.data = new wijmo.collections.CollectionView(getData());
            // sort by default based on pinned rows
            var sortDesc1 = new wijmo.collections.SortDescription('pin', false);
            $scope.data.sortDescriptions.push(sortDesc1);
            var sortedProp = {};
            // applying sorting on click
            $scope.sortedColumn = function (s, e) {
                var isSorted = false;
                if (sortedProp.col == e.col) {
                    // if column is click again for chnage sort type
                    sortedProp.sortType = s.columns[e.col].currentSort == '+' ? true : false;
                    isSorted = true;
                }
                if (!isSorted) {
                    // sort column for the first time
                    sortedProp.col = e.col;
                    sortedProp.sortType = true;
                    sortedProp.binding = s.columns[e.col].binding;
                }                
                $scope.data.sortDescriptions.clear();
                $scope.data.sortDescriptions.push(sortDesc1);
                var sortDesc2 = new wijmo.collections.SortDescription(sortedProp.binding, sortedProp.sortType);
                $scope.data.sortDescriptions.push(sortDesc2);                               
            };
            $scope.init = function (s, e) {
                // remove sorting icon from Pin column
                    s.columnHeaders.hostElement.children[0].className = 'wj-cell wj-header';
                    s.columnHeaders.hostElement.children[0].innerHTML = '<b>PIN</b>';
										console.log('Updated-view');
            };
        });
       

        // function used to get data for the grid
        function getData() {
            var names =...