How do I get both auto-localized select list enums AND datatables in ABP Framework (abp.io) - localization

Question

In the ABP framework, the tutorial for version 5.1 says to:
Use Enum:enum-type:enum-value naming convention to localize the enum members.
e.g. "Enum:BookType:1": "Adventure"
However, this does not work when using the abp-select tag helper. I can see from the source code for abp-select that the expected format is actually:
Enum:enum-type.enum-toString
e.g. "Enum:BookType.Adventure": "Adventure"
So the documentation is inaccurate, but not a problem, as soon as I changed the resource file enums to the correct format abp-select localised the display values as expected.
However, the datatables source code for the Book List in the same tutorial then breaks:
columnDefs: [
{
title: l('Type'),
data: "type",
render: function (data) {
return l('Enum:BookType:' + data);
}
}
This code expects the enum format to be Enum:enum-type:enum-value and as data is passed back as an int and not the string representation of the enum, the datatable doesn't show the localised data.
As a work around, I am diverging from the tutorial instructions and binding the datatable to a BookDto where BookType is mapped to a string, not an enum. Feels a bit cludgy though.
Am I missing something here ABP?
Great product but this tutorial needs updating either way.

Answer 1

I ran into the same issue but solved it by updating the localization file en.json to match the enum value stored in the database and then changing the book.component.html file to match the abpLocalization property.
When I followed the official documentation at abp, I got this result:
First run with fallback string in HTML component
Acme.BookStore.Application.Shared/Localization/en.json
{
"culture": "en",
"texts": {
"Menu:Home": "Home",
"Welcome": "Welcome",
"LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
"Menu:BookStore": "Book Store",
"Menu:Books": "Books",
"Actions": "Actions",
"Close": "Close",
"Delete": "Delete",
"Edit": "Edit",
"PublishDate": "Publish date",
"NewBook": "New book",
"Name": "Name",
"Type": "Type",
"Price": "Price",
"CreationTime": "Creation time",
"AreYouSure": "Are you sure?",
"AreYouSureToDelete": "Are you sure you want to delete this item?",
"Enum:BookType.0": "Undefined",
"Enum:BookType.1": "Adventure",
"Enum:BookType.2": "Biography",
"Enum:BookType.3": "Dystopia",
"Enum:BookType.4": "Fantastic",
"Enum:BookType.5": "Horror",
"Enum:BookType.6": "Science",
"Enum:BookType.7": "Science fiction",
"Enum:BookType.8": "Poetry"
}
}
book.component.html in the angular project
<div class="card">
<div class="card-header">
<div class="row">
<div class="col col-md-6">
<h5 class="card-title">
{{ '::Menu:Books' | abpLocalization }}
</h5>
</div>
<div class="text-end col col-md-6"></div>
</div>
</div>
<div class="card-body">
<ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
<ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
<ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ '::Enum:BookType.' + row.type | abpLocalization }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.publishDate | date }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.price | currency }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
As you can see I have replaced the ":" with a "." as in the localization file.
After change to source-code I get this result:
Enums now translated correctly
I hope this helps you and others struggling with the same issue :)

Answer 2

I just had the same issue. The problem is a mismatch between the declaration of the localization file wrt the usage in the JS code.
In the localization file you can find keys like:
"Enum:BookType.Adventure": "Adventure"
while in the JavaScript it is used:
render: function (data) {
return l('Enum:BookType:' + data);
}
Thus either you change the localization keys as e.g. "Enum:BookType:Adventure": "Adventure" (with ':') or you change the code with this function:
render: function (data) {
return l('Enum:BookType.' + data);
}
where the '.' is concatenated instead of ':'