New to Kendo UI for jQuery? Download free 30-day trial

Dynamically Change Languages in the Grid in AngularJS


Product Progress AngularJS Kendo UI Grid
Preferred Language JavaScript
Preferred Framework AngularJS


How can I dynamically change the language of the Kendo UI Grid in AngularJS applications?


The following example represents the AngularJS version of this demo.

<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <kendo-grid k-scope-field="grid" options="mainGridOptions" k-rebind="language"></kendo-grid>
        <kendo-dropdownlist k-scope-field="dropdownlist" k-options="dropDownListOptions"></kendo-dropdownlist>

    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope) {
            $scope.language = "en-US";

            $scope.changeLanguage = function() {
              var value = this.value();
              kendo.ui.progress($scope.grid.wrapper, true);
              var baseUrl = '//';
              $.getScript(baseUrl + value + ".min.js", function () {
                kendo.ui.progress($scope.grid.wrapper, false);
                $scope.$apply(function () {
                  $scope.language = value;

            $scope.dropDownListOptions = {
              change: $scope.changeLanguage,
              dataTextField: "text",
              dataValueField: "value",
              dataSource: [
                {text: "en-US"},
                {text: "bg-BG"},
                {text: "zh-CN"},
                {text: "ru-RU"}

            $scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//"
                    pageSize: 5,
                    serverPaging: true,
                    serverSorting: true
                sortable: true,
                pageable: true,
                filterable: true,
                dataBound: function() {
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    field: "Country",
                    width: "120px"
                    field: "City",
                    width: "120px"
                    field: "Title"

See Also

In this article
Not finding the help you need? Improve this article