104_i18n.ngdoc

@ngdoc overview
@name Tutorial: 104 i18n
@description

UI-Grid provides an i18nService that you can use to change the default language, add translations, 
or change existing translations.

The easiest way to set language is to use the ui-i18n directive in a div that contains the grid.
<pre>
<div ui-i18n="{{lang}}">
</pre>
Only one ui-i18n directive is allowed.  The current language setting is stored in the i18n service (singleton) 
so there is currently no way to have more than one language per app.

Another option is to use the i18nService and use the setCurrentLang method
<pre>
   i18nService.setCurrentLang('fr');
</pre>

For an example using angular-translate to translate your headers, refer to http://plnkr.co/edit/KnrKTst5dWXvlZNeIy9c?p=preview

If you would like to get better performance out of your application, it is recommended that you take advantage of UI-Grid's multi-file
support. By default ui-grid.core.js will contain just the english language, in order to load the other language follow the example bellow:
<pre>
   <script src="/release/ui-grid.core.js"></script>
   <script src="/release/i18n/ui-grid.language.[YOUR_LANGUAGE_HERE].js"></script>

   <!-- Alternatively you can load all languages provided with you grid by loading the following -->
   <script src="/release/i18n/ui-grid.language.all.js"></script>
</pre>

@example
<example module="app">
  <file name="app.js">
    angular.module('app', ['ngTouch', 'ui.grid'])
      .controller('MainCtrl', MainCtrl);

    MainCtrl.$inject = ['i18nService', '$http'];

    function MainCtrl(i18nService, $http) {
      var vm = this;

      vm.langs = i18nService.getAllLangs();
      vm.lang = 'nl';

      vm.gridOptions = {
        columnDefs: [
          { field: 'name' },
          { field: 'gender' },
          { field: 'company', enableFiltering: false  }
        ]
      };

      $http.get('/data/100.json')
        .then(function(response) {
          vm.gridOptions.data = response.data;
        });
    }
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl as $ctrl">
      <select id="langDropdown" ng-model="$ctrl.lang" ng-options="l for l in $ctrl.langs"></select>
      <br />

      <div ui-i18n="{{$ctrl.lang}}">
         <h2>Using attribute:</h2>
         <p ui-t="groupPanel.description"></p>

         <h2>Using attribute 2:</h2>
         <p ui-translate>groupPanel.description</p>

         <h2>Using Filter that updates with language:</h2>
         <p>{{"groupPanel.description" | t:$ctrl.lang}}</p>

         <h2>Using Filter that does not update after load:</h2>
         <p>{{"groupPanel.description" | t}}</p>

         <p>Click the header menu to see language.</p>

         <div id="i18nGrid" ui-grid="$ctrl.gridOptions" class="grid"></div>
      </div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 250px;
    }
  </file>
  <file name="scenario.js">
      var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');

      describe('104 i18n', function() {
        gridTestUtils.firefoxReload();

        it('should default to nl for the language', function() {
          expect(element(by.id('langDropdown')).element(by.css('option:checked')).getText()).toEqual('nl');
        });
        it('should have three visible columns', function() {
          gridTestUtils.expectHeaderColumnCount( 'i18nGrid', 3 );
        });
      });
  </file>
</example>