CODEWITHSUNDEEP
angularjsng-grid
user4692688
user4692688

Reputation:

Enable multilanguage in ng-grid header name

I have tried $translate service as follows:

 columnDefs: [{ 
                field: 'option_name',
                displayName: $translate('Optionname'),
                cellTemplate: '<div class="ngCellText"  ng-bind="row.getProperty(col.field)" ></div>' 
            },
            ...

it is showing {}. I also tried translate via filter:

columnDefs: [{ 
                field: 'option_name',
                displayName: '{{ Optionname | translate }}',
                cellTemplate: '<div class="ngCellText"  ng-bind="row.getProperty(col.field)" ></div>' 
            },
            ...

but it is showing {{ Optionname | translate }} so how can i translate header name in ng-grid?

Upvotes: 2

Views: 1443

Answers (1)

lin
lin

Reputation: 18402

You need to interact with $translation scope directly by using $translate.instant('id'). So .instant() will return a string which is the translated one. You can read about this scope in the documentation.

Example

columnDefs: [
    {   field: 'option_name',
        displayName: $translate.instant('Optionname'),
        cellTemplate: '<div class="ngCellText"  ng-bind="row.getProperty(col.field)" ></div>'
    },
    ...

Reinit ng-grid on language change to for translation of displayName again.

$translate.use("en_US").then(function(data){ 
    $scope.columnDefs = columnDefs: [{   
        field: 'option_name',
        displayName: $translate.instant('Optionname'),
        cellTemplate: '<div class="ngCellText"  ng-bind="row.getProperty(col.field)" ></div>'
    },
    ...
});

Upvotes: 1

Related Questions