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

Find more posts tagged with

eikon

eikon-app-studio

user-interface

Accepted answers

Jirapongse

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.

All comments

Jirapongse

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.

ichim_raluca

Hi,

Thanks for your answer. I sorted it out.

Best regards,

Raluca

EXPLORE OUR SITES