Styling UI grid
Hello,
I am using UI-grid to display data, and I would like to style it, so that gets Reuters look and feel. Could you please point to me what file do I have to include and what class to use?
I looked at the ng-grid example on the Eikon web UI, but could not figure it out, since class="ng-grid-example"seems to be something custom.
Thanks for letting me know.
Raluca
I think that Eikon Web UI supports ng-grid 2.x. I have tested with ng-grid 2.0.12 and it works fine with the Eikon Web UI.
The snippet code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ngGridExample">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ng-grid.js"></script>
<script src="ui-bootstrap-tpls.min.js"></script>
<link href="webui/css/EikonWebUI.css" rel="stylesheet" />
<style>
.ngGrid{
height: 500px;
width: 300px;
}
</style>
<script>
angular.module('ngGridExample', ['ngGrid'])
.controller('NgGridController', function ($scope) {
$scope.gridOptions = {
data: 'myData',
height: '500px',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age' },
{ field: 'birthday', displayName: 'Birthday' },
{ field: 'salary', displayName: 'Salary' }]
};
$scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
});
</script>
</head>
<body>
<div class="ng-grid-example" ng-controller="NgGridController">
<div ng-grid="gridOptions"></div><!-- add class="narrow" to enable narrow spacing -->
</div>
</body>
</html>
When downloading the Eikon Web UI, please make sure that ng-grid is selected.
The CSS classes used by UI-grid are different from ng-grid, so the Eikon Web UI will not work with UI-grid.
Hi,
Thanks for your answer. I sorted it out.
Best regards,
Raluca