Take a sample snippet: http://docs.webix.com/samples/33_angular/02_grid.html
Add a custom font from Google Web Fonts. Datatable renders empty. Remove that font and Datatable renders ok. What’s wrong?
This is not working:
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Grid</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<style>
html, body {
font-family: 'Open Sans', sans-serif;
}
</style>
<script src="vendor/js/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/webix/codebase/webix.css">
<script type="text/javascript" src="vendor/webix/codebase/webix.js"></script>
</head>
<body ng-controller="webixTestController">
<div style="width:750px;">
<div webix-ui view="datatable" webix-data="records" autoheight="true" select="row">
<div view="column" id="rating" sort="int" css="rating">Rating</div>
<div view="column" id="year" sort="int">Year</div>
<div view="column" id="votes" sort="int">Votes</div>
<div view="column" id="title" sort="string" fillspace="1">Title</div>
</div>
</div>
<br>
<button ng-click="addRecord()">Add Row</button>
<script>
var app = angular.module('webixApp', [ "webix" ]);
app.controller("webixTestController", function($scope){
$scope.records = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
];
$scope.addRecord = function(){
$scope.records.push({
title:"New Record",
rating:999,
votes:0,
year:2013
});
};
});
</script>
</body>
</html>
But this works:
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Grid</title>
<script src="vendor/js/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/webix/codebase/webix.css">
<script type="text/javascript" src="vendor/webix/codebase/webix.js"></script>
</head>
<body ng-controller="webixTestController">
<div style="width:750px;">
<div webix-ui view="datatable" webix-data="records" autoheight="true" select="row">
<div view="column" id="rating" sort="int" css="rating">Rating</div>
<div view="column" id="year" sort="int">Year</div>
<div view="column" id="votes" sort="int">Votes</div>
<div view="column" id="title" sort="string" fillspace="1">Title</div>
</div>
</div>
<br>
<button ng-click="addRecord()">Add Row</button>
<script>
var app = angular.module('webixApp', [ "webix" ]);
app.controller("webixTestController", function($scope){
$scope.records = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
];
$scope.addRecord = function(){
$scope.records.push({
title:"New Record",
rating:999,
votes:0,
year:2013
});
};
});
</script>
</body>
</html>