Wijmo 5 [Flex Grid]

Custom Sorting

by Manish Gupta

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>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="app" ng-controller="appCtrl">
        <wj-flex-grid items-source="data" style="width:500px;" sorting-column="sortingColumn(s,e)">
            <wj-flex-grid-column header="Type" binding="type" allow-sorting="false">     
            <wj-flex-grid-cell-template cell-type="Cell">
                    <span ng-class="{'glyphicon glyphicon-folder-open':$item.type=='Folder','glyphicon glyphicon-open-file':$item.type!='Folder'}"></span>
                </wj-flex-grid-cell-template>
            </wj-flex-grid-column>
            <wj-flex-grid-column header="Name" binding="name" width="*"></wj-flex-grid-column>
        </wj-flex-grid>
    </div>

JavaScript

var data = [
            { name: 'AAAx', type: 'Folder' },           
            { name: 'Excel Import 10 accounts.xlsx', type: 'xlsx' },
            { name: 'Assets', type: 'Folder' },
           
            { name: 'Income Statement', type: 'Folder' },
            { name: 'Liabilities and Equity', type: 'Folder' },
            { name: 'Permanent', type: 'Folder' },
             { name: 'General', type: 'Folder' },
              { name: 'WW.docx', type: 'docx' },
            { name: 'Untitled.pdf', type: 'pdf' }           
        ];
        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(data);
            $scope.data.sortConverter = function (sd,item,value) {
               if (sd.property == 'name' ) {                
                    value = item.type=='Folder'? 'A ' +item.name : 'B '+item.name;
                }
                return value;
            };
            

        });