Wijmo 5[Flex Grid Flex Grid Row Detail]
prevent flexgrid rowdetail collapse on sorting
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.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.detail.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">
<wj-flex-grid items-source="data" sorted-column="sortedColumn(s,e)" sorting-column="sortingColumn(s,e)">
<wj-flex-grid-detail detail-visibility-mode="ExpandSingle" max-height="300" initialized="init(s,e)">
<wj-flex-grid items-source="data"
headers-visibility="Column"
child-items-path="items" >
<wj-flex-grid-column binding="name" width="*"> </wj-flex-grid-column>
<wj-flex-grid-column binding="length" width="80" align="center"> </wj-flex-grid-column>
</wj-flex-grid>
</wj-flex-grid-detail>
</wj-flex-grid>
</div>
JavaScript
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < 10; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
var treeData = [ {
name: '\u266B Adriane Simione',
items: [ {
name: '\u266A Intelligible Sky',
items: [
{ name: 'Theories', length: '2:02' },
{ name: 'Giant Eyes', length: '3:29' },
{ name: 'Jovian Moons', length: '1:02' },
{ name: 'Open Minds', length: '2:41' },
{ name: 'Spacetronic Eyes', length: '3:41' }
] }
]},
{ name: '\u266B Amy Winehouse',
items: [
{ name: '\u266A Back to Black',
items: [
{ name: 'Addicted', length: '1:34' },
{ name: 'He Can Only Hold Her', length: '2:22' },
{ name: 'Some Unholy War', length: '2:21' },
{ name: 'Wake Up Alone', length: '3:43' },
{ name: 'Tears Dry On Their Own', length: '1:25' }
] }
]}];
var app = angular.module('app', ['wj']);
var isVisible = false;
app.controller('appCtrl', function ($scope) {
$scope.data = data;
$scope.detailData = treeData;
$scope.sortedColumn = function (s, e) {
if(isVisible)
$scope.detail.showDetail(s.selection.row);
};
$scope.sortingColumn = function (s, e) {
isVisible=$scope.detail.isDetailVisible(s.selection.row);
};
...