Localize with Angular Translate

The following example demonstrates how to localize a DatePicker in an AngularJS environment by using Angular Translate.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js"></script>
    <script src="https://kendo.cdn.telerik.com2014.2.903/js/cultures/kendo.culture.de-DE.min.js"></script>
    <script src="https://kendo.cdn.telerik.com2014.2.903/js/cultures/kendo.culture.en-US.min.js"></script>
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <p>TITLE</p>
        <p>FOO</p>

        <!-- the DropDown is used to change the culture -->
        <kendo-dropdownlist options="dropDownOptions" ng-model="lang"></kendo-dropdownlist>

        <!-- k-rebind="mainGridOptions.language" is used to force the widget update -->
        <kendo-grid options="mainGridOptions" k-rebind="mainGridOptions.language"></kendo-grid>

        <!-- k-rebind="calendarOptions.culture" is used to force the widget update -->
        <kendo-calendar options="calendarOptions" k-rebind="calendarOptions.culture"></kendo-calendar>
      </div>
    </div>

    <script>
      var app = angular.module("KendoDemos", [ "kendo.directives", "pascalprecht.translate"]);

      //set up the language provider (http://angular-translate.github.io/docs/#/guide)
      app.config(['$translateProvider', function ($translateProvider) {
        $translateProvider.translations('en-US', {
          'TITLE': 'Hello',
          'FOO': 'This is a paragraph'
        });

        $translateProvider.translations('de-DE', {
          'TITLE': 'Hallo',
          'FOO': 'Dies ist ein Paragraph'
        });

        $translateProvider.preferredLanguage('en-US');
      }]);

      function MyCtrl($scope, $translate) {

        $scope.lang = "en-US";

        $scope.calendarOptions = {
          culture: "en-US"
        }

        $scope.dropDownOptions = {
          dataValueField: "value",
          dataTextField: "text",
          dataSource : {
            data: [{value: "en-US", text: "English"}, {value: "de-DE", text:"German"}]
          },
          change: function(){

            /* The kendo.culture.xx-XX.js files can be pre-loaded in the <head> section of the document,
                    but the kendo.messages.xx-XX.js file should be loaded on demand when the language is about to change */

            /* We are using the jQuery.getScript method to load the messages file
                    and use the callback function to change the kendo culture, kendo messages and angular-translate language */

            $.getScript("https://kendo.cdn.telerik.com2014.2.903/js/messages/kendo.messages." + $scope.lang + ".min.js", function() {

              /* $scope.$apply should be used in order to notify the $scope for language change */
              $scope.$apply(function(){

                $translate.use($scope.lang); //change angular-translate language
                kendo.culture($scope.lang); //change kendo culture

                /* we use dummy language option in order to force the Grid to rebind */
                $scope.mainGridOptions.language = $scope.lang;

                /* we change the calendar widget culture option in order to force the Calendar to rebind */
                $scope.calendarOptions.culture = $scope.lang;

              })
            });
          }
        }

        $scope.mainGridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
          },
          sortable: true,
          pageable: true,
          language: "english",
          columns: [{
            field: "FirstName",
            title: "First Name",
            width: "120px"
          },{
            field: "LastName",
            title: "Last Name",
            width: "120px"
          },{
            field: "Country",
            width: "120px"
          },{
            field: "City",
            width: "120px"
          },{
            field: "Extension"
          }]
        };
      }
    </script>
Localize with Angular Translate

See Also

Was this article helpful?

Tell us how we can improve this article

Getting Started

Community

Frameworks
