Search code examples
angularjsangular-ui-gridangular-translate

Angular UI grid - Translate grid on fly

I am using angular ui-grid. I want to translate the grid on fly. For example my current language is English. The grid gets rendered in English. Now I switch to french. I want all my menu options to be translated to french. How can I achieve this? This is my link to plunkr.

http://plnkr.co/edit/tpdNYirUEIF3RL0kf2d7?p=preview

Here is my sample code

HTML

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.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-unstable.js"></script>
    <script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <select ng-model="lang" ng-options="l for l in langs"></select><br>

      <div ui-i18n="{{lang}}">
         <p>Using attribute:</p>
         <p ui-t="groupPanel.description"></p>
         <br/>
         <p>Using Filter:</p>
         <p>{{"groupPanel.description" | t}}</p>

         <p>Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered. </p>

         <div ui-grid="gridOptions" class="grid"></div>
      </div>

    </div>
  </body>
</html>

My JS

var app = angular.module('app', ['ngTouch', 'ui.grid', 'pascalprecht.translate']);

app.controller('MainCtrl', ['$scope', 'i18nService', '$http', '$translate','$rootScope', function ($scope, i18nService, $http, $translate,$rootScope) {
    $scope.langs = i18nService.getAllLangs();
    $scope.lang = 'en'

    $scope.gridOptions = {
      columnDefs: [
        { displayName: 'NAME', field: 'name', headerCellFilter: 'translate' },
        { displayName: 'GENDER', field: 'gender', headerCellFilter: 'translate' },
        { displayName: 'COMPANY', field: 'company', headerCellFilter: 'translate', enableFiltering: false  }
      ]
    };
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    GENDER: 'Gender',
    NAME: 'Name',
    COMPANY: 'Company'
  });
  $translateProvider.translations('de', {
    GENDER: 'Geschlecht',
    NAME: 'Name',
    COMPANY: 'Unternehmen'
  });
  $translateProvider.preferredLanguage('en');
});

The first screenshot refers to default language English. When I change my language to 'de' the grid menu options don't get translated. How can I make this happen? enter image description here

enter image description here

Solution

  • To translate the Grid on the fly if you are using "Angular Translate", you should only refresh the Grid language when the angular-translate's event "$translateChangeSuccess" get fired like below:

    // Get Fired when you change language using angular-translate
$rootScope.$on('$translateChangeSuccess', function (event, a) {
    $scope.language = $translate.proposedLanguage() || $translate.use();
    i18nService.setCurrentLang($scope.language); // Refresh the grid language
});

    Do not forget to inject $rootScope and i18nService.