Dynamically Change Languages in the Grid in AngularJS
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Preferred Language | JavaScript |
Preferred Framework | AngularJS |
Description
How can I dynamically change the language of the Kendo UI Grid in AngularJS applications?
Solution
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>
</div>
</div>
<script>
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 = '//kendo.cdn.telerik.com/2016.1.226/js/messages/kendo.messages.';
$.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: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
filterable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
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"
}]
};
});
</script>