Some problems displaying data in ui-grid

Question

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)?

Answer 1

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