Some problems displaying data in ui-grid

I use ui-grid in my tutorial project.

Here is the defenition inside controller:

(function () {
      "use strict"; 
angular.module("workPlan").controller("workPlanListController",["$http","$log",workPlanListController]);

function workPlanListController($http,$log) {
    var self = this;

    this.gridOptions = {
        expandableRowTemplate: 'expandableRowTemplate.html',
        //expandableRowHeight: 150,
        enableColumnMenus: false,
        enableSorting: true,
        enableFiltering: true,
        onRegisterApi: function (gridApi) {
            gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                if (row.isExpanded) {
                    row.entity.subGridOptions = {
                        columnDefs: [{ name: 'name' },
                                     { name: 'gender' },
                                     { name: 'company' }]
                    };

                    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                      .success(function (data) {
                          row.entity.subGridOptions.data = data;
                      });
                }
            });
        }
    }
  this.gridOptions.columnDefs = [
      { name: 'PId', field: 'id'},
      { name: 'PName',field: 'name'},
      { name: 'PAge', field: 'age'}];



    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
      .success(function (data) {
          self.gridOptions.data = data;
      });
}
})();

Here is the view I get:

But there is problem, as you can see on the image above, the content of field id appears under the PAge column and the content of field PAge appears under the PId column.

Any idea why this happens? Why does the content of one column appear under another column? Could it be related to localization (in my project I am using Hebrew)?

Upvotes: 3

Answers (3)

Courtney B Reid

Reputation: 156

It looks like the issue may be related to localization/language. Assuming the page is set up to render text right-to-left, the issue can be reproduced on this Plunkr.

Unfortunately, it looks like ui-grid does not yet support RTL text, but there are workarounds available.

Applying the following CSS to your grid will align your columns and headers appropriately:

.grid[dir=rtl] .ui-grid-header-cell,
.grid[dir=rtl] .ui-grid-cell{
  float:right !important;
} 

.grid[dir=rtl] .ui-grid-scrollbar-vertical {
  width: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  right:inherit;
  left: 4px;
  top: 0;
}

Plunkr example

Upvotes: 4

Kumaresan Perumal

Reputation: 1956

    (function () {
        "use strict";

    angular.module('app',['ngTouch', 'ui.grid', 'ui.grid.expandable',
    'ui.grid.selection', 'ui.grid.pinning']).controller('MainCtrl',
    function($scope,$http,$log) {

        $scope.name = 'World';
        // Do things

        $scope.gridOptions = {
            expandableRowTemplate: 'expandableRowTemplate.html',
            //expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: true,
            onRegisterApi: function (gridApi) {
                gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            columnDefs: [{ name: 'name' },
                                         { name: 'gender' },
                                         { name: 'company' }]
                        };

                        $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                          .success(function (data) {
                              row.entity.subGridOptions.data = data;
                          });
                    }
                });
            }
        }
        $scope.gridOptions.columnDefs = [
          { name: 'PId', field: 'id'},
          { name: 'PName',field: 'name'},
          { name: 'PAge', field: 'age'}];

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
          .success(function (data) {
              $scope.gridOptions.data = data;
          });

    });


    }());

HTML:
======
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
    </div>


    <script src="app.js"></script>
  </body>
</html>

CSS:
====
.grid {
  width: 100%;
  height: 400px;
}

expandableRowTemplate.html:
===========================

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

you refer this plunker http://plnkr.co/edit/TAbvGUsDKS6pcbEkGWV6?p=preview
or replace the js file. it will work well.

Upvotes: 0

Christian Nagel

Reputation: 201

There is a typo: { name: 'PId', field: 'id', }

Delete the comma and maybe it work.

Greets Christian

Upvotes: -1

Some problems displaying data in ui-grid

Answers (3)

Related Questions