Unable to display the German/Czech/Slovak language content on the Toolbar buttons of DevExtreme datagrid

Question

I am customizing the DevExtreme toolbar in my application with the different buttons. On this command buttons we want to show the localize strings based on the logged in user.

For translation We have implemented a dictionary which has key as a number and value as a translated string based on logged in user. We are populating this dictionary in Model variable from controller side. When populating this values it encodes some special characters which are displayed correctly on HTML controls, on datagrid column headers but when we come to buttons on the Toolbar its showing the encoded values only.

Datagrid toolbar

here code for toolbar is as below,

function onToolbarPreparing(e){ var dataGrid = e.component;

    e.toolbarOptions.items.unshift(
        {
            location: "after",
            widget: "dxButton",
            options: {
                icon: "toolbox",
                text:'@_localizer["11111"]',//@_localizer["11111"]=Warenempfänger bearbeiten
                disabled:true,
                elementAttr: {
                    id: 'btnEditShiptos',
                    "class": "btn btn-primary"
                    },
                onClick: function() {
                    location.replace("https://example.com/appname/?id="+selectedId);
                }
            }
        },
        {
            location: "after",
            widget: "dxButton",
            options: {
                icon: "runner",
                text:'@_localizer["22222"]',
                disabled:true,
                elementAttr: {
                    id: 'btnEditAccess',
                    "class": "btn btn-primary"
                    },
                onClick: function() {
                    location.replace("https://example.com/appname/?id="+selectedId);
                }
            }
        },
        {
            location: "after",
            widget: "dxButton",
            options: {
                icon: "user",
                text:'@_localizer["33333"]',
                disabled:true,
                elementAttr: {
                    id: 'btnEditProfile',
                    "class": "btn btn-primary"
                    },
                onClick: function () {
                    location.replace("https://example.com/appname/?id="+selectedId);
                }
            }
        }
    );
}

In above code @_localizer["112185"] is the dictionary variable in Model populated from controller. Which contains values as,

<"112145","Warenempfänger bearbeiten"> here this text should be displayed as Warenempfänger bearbeiten but its showing the encoded values. If I tried displaying the same value in HTML control like span out side DevExtrene grid it works fine.

Request you to provide some solution so that I can display the button text well.

Answer 1

You can use the HtmlString class to wrap an HTML-encoded string:

text: '@(new HtmlString(_localizer["111"]))',