Wijmo 5[FlexGrid]
Performance issue in IE on scroll
HTML
<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" >
<h4>
Performance issue in IE on Flex grid.To overcome this problem wrap flexgrid in div and set div overflow to scroll.
</h4>
<div >
<wj-flex-grid items-source="data" >
<wj-flex-grid-column header="Id" binding="id" width="*"></wj-flex-grid-column>
<wj-flex-grid-column header="Date" binding="date" width="*"></wj-flex-grid-column>
<wj-flex-grid-column header="Country" binding="country" width="2*"
is-read-only="true" align="center">
<wj-flex-grid-cell-template cell-type="Cell">
<div class="row">
<img src="http://demos.wijmo.com/5/Angular/CellTemplateIntro/CellTemplateIntro/resources/{{$item.country}}.png">
<span class="analystNameTopic" ng-bind="$item.country"></span><button>{{$item.sales}}</button>
</div>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="Country Id" biniding="countyMapped" align="center" width="*">
<wj-flex-grid-cell-template cell-type="Cell">
<div class="row">
<img src="http://demos.wijmo.com/5/Angular/CellTemplateIntro/CellTemplateIntro/resources/{{$item.country}}.png">
<span...
CSS
.table-wrapper{
width:90%;
margin:10px auto;
height:400px;
background-color:aqua;
overflow:scroll;
}
.wj-flexgrid {
max-height: 500px;
}
JavaScript
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < 100; i++) { data.push({ id: i, date: new Date(2015, Math.floor(i / countries.length) % 12, (Math.floor(i / countries.length) + 1) % 28), country: countries[i % countries.length], countryMapped: i % countries.length, downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, checked: i % 9 == 0 }); }
var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope) {
$scope.data = new wijmo.collections.CollectionView(data);
});