jQWidgets Forums

Tagged: angularjs grid, multilanguage

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Multilanguage implementation on jqwidgets grid Posts

March 2, 2015 at 7:10 am Multilanguage implementation on jqwidgets grid #67864

iplan

Participant

Hi team,
Is “jqwidgets” grid using angularjs support multilanguage, if it support send any link to implement it.

March 2, 2015 at 7:37 am Multilanguage implementation on jqwidgets grid #67878

Peter Stoev

Keymaster

Hi iplan,

The localization property defines the Grid’s localization. You can look at the jqxGrid’s demos and documentation to learn how to use that property.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 2, 2015 at 7:53 am Multilanguage implementation on jqwidgets grid #67881

iplan

Participant

Hi peter,
As I tired with the following code, but column name not to be translates.

<!doctype html>
<html>
<head>
    <link href="jqx.base.css" rel="stylesheet" />
    <script src="jquery-1.11.1.js"></script>
    <script src="angular.min.js"></script>
    <script src="angular-translate.min.js"></script>
    <script src="jqx-all.js"></script>
    <script src="jqxangular.js"></script>
    <script src="script.js"></script>

</head>
<body>
    <div ng-app="testApp" ng-controller="testCtrl">
        <jqx-grid jqx-settings="settings"></jqx-grid>
         {{'id'|translate}}
         {{'name'|translate}}
         {{'age'|translate}}

        <button ng-click="btnenglish()" translate="btn_en">English</button>
        <button ng-click="btngerman()" translate="btn_gm">German</button>
    </div>
</body>
</html>
<!DOCTYPE html>

script.js

var translationsEN = {
    btn_en: 'English',
    id:'id-english',
    name: 'name-english',
    age:'age-english'
};

var translationsGM = {
    btn_gm: 'German',
    name: 'iplan-german',
    id: 'id-german',
    name: 'name-german',
    age: 'age-german'
};

var apptest = angular.module('testApp', ['jqwidgets', 'pascalprecht.translate']);

apptest.config(['$translateProvider', function ($translateProvider) {
  
    $translateProvider.translations('en', translationsEN);
    $translateProvider.translations('gm', translationsGM);
    $translateProvider.preferredLanguage('en');
    $translateProvider.fallbackLanguage('en');
    $translateProvider.fallbackLanguage('gm');
}]);

apptest.controller('testCtrl', ['$scope', '$translate', function ($scope, $translate) {

    $scope.btnenglish = function () {
        $translate.use('en');
    }

    $scope.btngerman = function () {
        $translate.use('gm');
    }

    $scope.people = [{
        id: 1,
        name: "Pedro",
        age: 13
    }, {
        id: 2,
        name: "Clara",
        age: 22
    }, {
        id: 3,
        name: "John",
        age: 33
    }, {
        id: 4,
        name: "Pier",
        age: 27
    }];
    $scope.settings = {
        altrows: true,
        width: 500,
        height: 150,
        source: $scope.people,
        columns: [{
            text: $translate('id'),
            dataField: 'id',
            width: 150
        }, {
            text: $translate('name'),
            dataField: 'name',
            width: 200
        }, {
            text: $translate('age'),
            dataField: 'age',
            width: 150
        }]
    }

}]);

March 2, 2015 at 1:37 pm Multilanguage implementation on jqwidgets grid #67899

Peter Stoev

Keymaster

Hi iplan,

I don’t see you to followed my guidelines in this code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.