Search code examples
localizationdevexpressglobalizationdevextreme

Localising HTML text using DevExtreme & Globalization

I am currently adding globalization to an existing web app which uses devextreme to present the page, as below:

<body>
<div id="viewport" class="dx-viewport">
    <div class="startPage dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div class="content">
            <h1>Registration</h1>
            <div class="regForm" id="registrationForm" />
            <div class="regButton" id="registrationButton" />
            <div class="loadIndicator" id="loadIndicator" />
            <div class="registrationSucceeded" id="registrationSucceeded" />
            <div class="returnToMainPageButton" id="returnToMainPageButton"/>
        </div>
    </div>
</div>

The entries are translated as expected but I can't figure out how to translate the heading as DevExtreme doesn't provide a straight 'Text' widget. If I set it to use a TextArea, for example then it does work but then obviously doesn't look like a header.

So, how can I translate the header text (or any other that is held in the HTML page)?

Solution

  • Maybe the official DevExtreme localization topic will be usefull for you.

    So, how can I translate the header text (or any other that is held in the HTML page)?

    You can use a text binding to provide content based on current locale.