Styling UI grid

ichim_raluca
ichim_raluca
in App Studio

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

Tagged:

Best Answer

  • Jirapongse
    Jirapongse
    Answer ✓

    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.

    image

    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.

    image

    The CSS classes used by UI-grid are different from ng-grid, so the Eikon Web UI will not work with UI-grid.

Answers

Categories