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.