Wijmo 5[Flex Grid]

Grid was not display properly with ng-show

by Manish Gupta

HTML

<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" >
        Select Option tos show data :<select ng-options="item.name for item in options track by item.name" ng-model="selectedItem"></select>
        
        <div ng-show="isSelected('Grid1')">
            <h2>{{selectedItem.name}}</h2>
           <wj-flex-grid items-source="workers1" control="Grid1"></wj-flex-grid>
        </div>
        <div ng-show="isSelected('Grid2')">
            <h2>{{selectedItem.name}}</h2> 
            <wj-flex-grid items-source="workers2" control="Grid2"></wj-flex-grid>
        </div>
        <div ng-show="isSelected('Grid3')">
            <h2>{{selectedItem.name}}</h2>
            <wj-flex-grid items-source="workers3" control="Grid3"></wj-flex-grid>
        </div>
    </div>

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope,$timeout) {
            $scope.options = [{ name: 'Grid1' }, { name: 'Grid2' }, { name: 'Grid3' }];
            $scope.selectedItem = { name: 'Grid1' };         
           
            $scope.isSelected = function (value) {
                if (value == $scope.selectedItem.name) {
                    $scope.Grid2.invalidate(true);
                    $scope.Grid3.invalidate(true);
                    return true;
                }                    
                else
                    return false;
            };
            
            $scope.workers1 = [{ name: 'Grid1 - Row1', hours: 10 },
                               { name: 'Grid1 - Row2', hours: 10 },
                               {name: 'Grid1 - Row3',hours: 10}];
            $scope.workers2 = [{ name: 'Grid2 - Row1', hours: 100 },
                               { name: 'Grid2 - Row2', hours: 100 },
                               { name: 'Grid2 - Row3', hours: 100 },
                               {name: 'Grid2 - Row4',hours: 100 },
                               {name: 'Grid2 - Row5',hours: 100}];
            $scope.workers3 = [{ name: 'Grid3 - Row1', hours: 1000 },
                              { name: 'Grid3 - Row2', hours: 1000 },
                              { name: 'Grid3 - Row3', hours: 1000 },
                              { name: 'Grid3 - Row4', hours: 1000 },
                              { name: 'Grid3 - Row5', hours: 1000 },
                              { name: 'Grid3 - Row6', hours: 1000 },
                              { name: 'Grid3 - Row7', hours: 1000 },
                              { name: 'Grid3 - Row8', hours: 1000 } ];
        });