Wijmo 5 [Grid Flicker on Auto size and sorting]

Multiple column sorting in flexgrid detail view using Pure JS

by Manish Gupta

HTML

<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.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.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
        
        <button class="btn btn-default" ng-click="addNewRow()">Add New Row</button>
        <wj-flex-grid items-source="data" auto-size-mode="Both" initialized="init(s,e)" cell-edit-ended="EditEnd(s,e)" sorted-column="init(s,e)">
            <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
            <wj-flex-grid-column header="Colors" binding="colors">
                <wj-flex-grid-cell-template cell-type="Cell">
                    <div><div style="width:15px;height:15px;background:{{$item.color}};float:left;"></div> Color : {{$item.color}}</div>
                </wj-flex-grid-cell-template>
            </wj-flex-grid-column>

        </wj-flex-grid>

    </div>

JavaScript

var app = angular.module('app', ['wj']);
        // app controller provides data
        app.controller('appCtrl', function appCtrl($scope) {
            // generate some random data
            var countries = 'US,Germany is a Western European country with a terrain of vast forests.,UK,Japan,Italy commanding a long Mediterranean coastline has left a powerful mark on Western culture and cuisine,Greece'.split(','),
                colors='blue,red,yellow,green'.split(','),data = [];
            for (var i = 0; i < 100; i++) {
                data.push({
                    id: i,
                    country: countries[i % countries.length] ,
                    date: new Date(2014, i % 12, i % 28),
                    color:colors[ Math.floor((Math.random() * 4))],
                    active: i % 4 == 0
                });
            }
          
            // add data array to scope
            $scope.data = new wijmo.collections.CollectionView(data);
            $scope.addNewRow = function () {
                $scope.data.addNew();
                $scope.data.refresh();
            };
            $scope.init = function (s, e) {
                if (s) {
                    s.columns[0].wordWrap = true;
                    s.autoSizeRows(0, s.rows.length - 1,false,10);
                }
            }
            $scope.EditEnd = function (s, e) {
                
                s.autoSizeRow(e.row);
            }
            var sortDesc = new wijmo.collections.SortDescription('country', true);
            $scope.data.sortDescriptions.push(sortDesc);
        });