Last active
June 27, 2016 20:14
-
-
Save manrueda/46dd31a4957eecb16a6b1b9c14f3d83f to your computer and use it in GitHub Desktop.
WjFlexGridCellTemplate with angular templates, width error
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<wj-flex-grid items-source="data" style="height: 150px;margin-top:10px" control="flex" initialized="initialized(s,e)"> | |
<wj-flex-grid-column header="Country" binding="country" width="*" allow-resizing="false"> | |
<wj-flex-grid-cell-template cell-type="Cell"> | |
<!--<h1>{{$item.country}}</h1>--> | |
<div ng-include="'tpl.html'"></div> | |
</wj-flex-grid-cell-template> | |
</wj-flex-grid-column> | |
<wj-flex-grid-column header="Sales" binding="sales" width="*" allow-resizing="false"></wj-flex-grid-column> | |
<wj-flex-grid-column header="Expenses" binding="expenses" width="*" allow-resizing="false"></wj-flex-grid-column> | |
<wj-flex-grid-column header="Downloads" binding="downloads" width="*" allow-resizing="false"></wj-flex-grid-column> | |
</wj-flex-grid> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script> | |
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
<link rel="stylesheet" type="text/css" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css"> | |
<script type="text/javascript" src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script> | |
<script type="text/javascript" src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script> | |
<script type="text/javascript" src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script> | |
</head> | |
<body> | |
<div ng-app="app" ng-controller="appCtrl"> | |
<div ng-view></div> | |
<button ng-click="click()">Reload Route</button> | |
</div> | |
<script> | |
// define app, include Wijmo 5 directives | |
var app = angular.module('app', ['ngRoute', 'wj']); | |
app.config(function($routeProvider) { | |
$routeProvider | |
.when('/grid', { | |
templateUrl: 'grid.html', | |
controller: 'GridController' | |
}).otherwise('/grid') | |
}); | |
app.controller('appCtrl', function ($scope, $route) { | |
$scope.click = function (){ | |
$route.reload(); | |
} | |
}); | |
// controller | |
app.controller('GridController', function ($scope, $timeout) { | |
// create some random data | |
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), | |
data = []; | |
for (var i = 0; i < countries.length; i++) { | |
data.push({ | |
country: countries[i], | |
downloads: Math.round(Math.random() * 20000), | |
sales: Math.random() * 10000, | |
expenses: Math.random() * 5000 | |
}); | |
} | |
// expose data as a CollectionView to get events | |
$scope.data = new wijmo.collections.CollectionView(data); | |
$scope.initialized = function(s,e){ | |
$timeout(function () { | |
$scope.flex.autoSizeColumn(0); | |
$scope.flex.autoSizeColumn(1); | |
$scope.flex.autoSizeColumn(2); | |
$scope.flex.autoSizeColumn(3); | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>{{$item.country}}</h1> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment