Skip to content

Instantly share code, notes, and snippets.

@manrueda

manrueda/grid.html

Last active June 27, 2016 20:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manrueda/46dd31a4957eecb16a6b1b9c14f3d83f to your computer and use it in GitHub Desktop.
Save manrueda/46dd31a4957eecb16a6b1b9c14f3d83f to your computer and use it in GitHub Desktop.
Download ZIP
WjFlexGridCellTemplate with angular templates, width error
Raw
grid.html
<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>
Raw
index.html
<!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>
Raw
tpl.html
<h1>{{$item.country}}</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment