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
Thank you for your participation in the forum.
Are any of the replies below satisfactory in resolving your query?
If yes please click the 'Accept' text next to the most appropriate reply. This will guide all community members who have a similar question.
Otherwise please post again offering further insight into your question.
Thanks,
AHS
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.
