RadComboBox Translation

[Michael]

Is there any possibility to be able to make the EmptyMessage in a RadComboBox to be translated by the browser but the Drop-down list items to stay untranslated

[Rumen]

Hi Machael,

I played with this interesting scenario but unfortunately wasn't able to find a solution.

The EmptyMessage feature of RadComboBox is represented by a read-only input element. My research shows that the built-in browsers (Chrome and Firefox) spellcheckers do not translate the text of the HTML input and textarea elements, most likely on purpose:

        <label for="textbox">TextBox:</label>
        <input name="textbox" type="text" id="textbox1" value="selecciona un artículo" spellcheck="true">
        <br />
        <label for="TextArea1">TextArea:</label>
        <textarea spellcheck="true" id="TextArea1">
            selecciona un artículo
        </textarea>
        <br />
        <label for="RadComboBox1">Combobox:</label>
        <telerik:RadComboBox ID="RadComboBox1" spellcheck="true" runat="server" EmptyMessage="selecciona un artículo" Filter="StartsWith">
            <Items>
                <telerik:RadComboBoxItem Text="Artículo 1" Value="1" />
                <telerik:RadComboBoxItem Text="Artículo 2" Value="2" />
                <telerik:RadComboBoxItem Text="Artículo 3" Value="3" />
            </Items>
        </telerik:RadComboBox>
        <br />
        <label for="para1">Normal paragraph:</label>
        <p id="para1">
            selecciona un artículo
        </p>

You can test at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_spellcheck_disable. 

For me, this looks intended to prevent any content loss during the translation. If you can find a solution which allows you to spellcheck a regular input element and especially readonly input elements, please share it and I will apply it to RadComboBox input. 

As for the items, I applied the spellcheck="false" to the combobox items, but this does not prevented the spellchecker to modify the text in them, e.g.

<telerik:RadComboBox ID="RadComboBox1" spellcheck="true" runat="server" EmptyMessage="selecciona un artículo" OnClientLoad="OnClientLoad" OnClientDropDownOpening="onDropDownOpening">
    <Items>
        <telerik:RadComboBoxItem Text="Artículo 1" Value="1" />
        <telerik:RadComboBoxItem Text="Artículo 2" Value="2" />
        <telerik:RadComboBoxItem Text="Artículo 3" Value="3" />
    </Items>
</telerik:RadComboBox>
<script>
    function OnClientLoad(sender, args) {
        // Get the RadComboBox instance
        var radComboBox = sender;

        // Get the input element for the EmptyMessage
        var inputElement = radComboBox.get_inputDomElement();

        // Set spellcheck attribute to false for the input element
        inputElement.setAttribute("spellcheck", "true");



        // Prevent translation for drop-down list items by setting spellcheck attribute
        var listItems = radComboBox.get_items();
        for (var i = 0; i < listItems.get_count(); i++) {
            var listItem = listItems.getItem(i);
            listItem.get_textElement().setAttribute("spellcheck", "false");
        }
    }
    function onDropDownOpening(sender, eventArgs) {
        var radComboBox = sender;
        var listItems = radComboBox.get_items();
        for (var i = 0; i < listItems.get_count(); i++) {
            var listItem = listItems.getItem(i);
            var textElement = listItem.get_textElement();

            if (!textElement.innerHTML.includes('<font')) {
                var originalText = textElement.innerHTML;
                textElement.innerHTML = '<font spellcheck="false" style="vertical-align: inherit;">' + originalText + '</font>';
            }
        }
    }
</script>