Discover Refinitiv
MyRefinitiv Refinitiv Perspectives Careers
Created with Sketch.
All APIs Questions & Answers  Register |  Login
Ask a question
  • Questions
  • Tags
  • Badges
  • Unanswered
Search:
  • Home /
  • App Studio /
avatar image
Question by ichim_raluca · Nov 25, 2016 at 03:19 AM · eikoneikon-app-studiouser-interface

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

People who like this

0 Show 0
Comment
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

2 Replies

  • Sort: 
avatar image
REFINITIV
Best Answer
Answer by Jirapongse · Nov 28, 2016 at 10:13 PM

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.


nggrid.png (24.0 KiB)
package.png (14.7 KiB)
Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

avatar image
Answer by ichim_raluca · Nov 29, 2016 at 08:11 AM

Hi,

Thanks for your answer. I sorted it out.

Best regards,

Raluca

Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Watch this question

Add to watch list
Add to your watch list to receive emailed updates for this question. Too many emails? Change your settings >
7 People are following this question.

Related Questions

How to add a Search Box

Eikon App Studio Webinar Mar 1: In a Quote object user can display all fields to see all available fields for that RIC

Initialize DEX2 in App Studio .NET SDK app that failed with COM Exception

Can an App Studio app control the size of the container its opened in?

How to use JET request in a new window?

  • Copyright
  • Cookie Policy
  • Privacy Statement
  • Terms of Use
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Alpha
  • App Studio
  • Block Chain
  • Bot Platform
  • Connected Risk APIs
  • DSS
  • Data Fusion
  • Data Model Discovery
  • Datastream
  • Eikon COM
  • Eikon Data APIs
  • Electronic Trading
    • Generic FIX
    • Local Bank Node API
    • Trading API
  • Elektron
    • EMA
    • ETA
    • WebSocket API
  • Intelligent Tagging
  • Legal One
  • Messenger Bot
  • Messenger Side by Side
  • ONESOURCE
    • Indirect Tax
  • Open Calais
  • Open PermID
    • Entity Search
  • Org ID
  • PAM
    • PAM - Logging
  • ProView
  • ProView Internal
  • Product Insight
  • Project Tracking
  • RDMS
  • Refinitiv Data Platform
    • Refinitiv Data Platform Libraries
  • Rose's Space
  • Screening
    • Qual-ID API
    • Screening Deployed
    • Screening Online
    • World-Check One
    • World-Check One Zero Footprint
  • Side by Side Integration API
  • TR Knowledge Graph
  • TREP APIs
    • CAT
    • DACS Station
    • Open DACS
    • RFA
    • UPA
  • TREP Infrastructure
  • TRKD
  • TRTH
  • Thomson One Smart
  • Transactions
    • REDI API
  • Velocity Analytics
  • Wealth Management Web Services
  • Workspace SDK
    • Element Framework
    • Grid
  • World-Check Data File
  • 中文论坛
  • Explore
  • Tags
  • Questions
  • Badges