HTML tags in text element

[Matthew R Longhouse]

We recently upgraded to the Q1 2014 release and are now having problem with HTML tags not being rendered in the text element of the drop down list control.  We have a custom control derived from RadDropDownList that renders labels inside of the text element (ex. "<b>Field1:</b> myvalue").  While I understand this probably isn't officially supported, it did work in the previous release we used (Q2 2013).

Oddly enough, the HTML tags do render when the page initially loads, however, when a new item is selected (which takes the item text and prepends the label and uses the set_text method to update the text of the item) it is showing the tags after HTML encoding in the text element.  The HTML is rendered in the item element as expected.

I traced the issue down to the _updateTextElement method on the client side object and its call to H.text to set the text of the text element.  I played around with replacing that with my own method which uses H.html and it seems to work.  I also had to change the variable "a" to "$telerik.$".

I'm curious to know whether there is a better approach to this or whether I should use the override method assuming that it works and there are no issues with it.
        

Telerik.Web.UI.RadDropDownList.prototype._updateTextElement = function (I) {
    var H = $telerik.$(this.get_textElement());
    if (I) {
        H.html(I);
        H.removeClass(i);
    } else {
        H.html(this.get_defaultMessage());
        H.addClass(i);
    }
        this.get_element().value = I;
};

[Nencho]

Hello Matthew,

Indeed such extension of our controls is not a supported scenario. However, I would like to ask you to provide us with your current implementation, isolated in a runnable sample, in order to inspect it locally and try to troubleshoot the issue for you, or verify if the approach you manage to find is the correct one.


Regards,
Nencho
Telerik

 

 

[Matthew R Longhouse]

The crux of the issue is that I can't set HTML to the text element as I could before.  To reproduce this you can override the client-side item selected event and use it to change the text in the text element.  The text will show the HTML tags and will not be bold as desired.

<telerik:RadDropDownList ID="ddlHtmlTest" OnClientItemSelected="ddlHtmlTest_ItemSelected" runat="server">
    <Items>
        <telerik:DropDownListItem Text="Item 1" runat="server"/>
        <telerik:DropDownListItem Text="Item 2" runat="server"/>
        <telerik:DropDownListItem Text="Item 3" runat="server"/>
    </Items>
</telerik:RadDropDownList>

function ddlHtmlTest_ItemSelected(sender, eventArgs)
{
    var item = eventArgs.get_item();
    item.set_text('<b>' + item.get_text() + '</b>');
}

[Shinu]

Hi Matthew R Longhouse,

As a work around please try the below sample code snippet.

JavaScript:

function ddlHtmlTest_ItemSelected(sender, eventArgs) {
    var item = eventArgs.get_item();
    item._textElement.innerHTML = "<b>" + item.get_text() + "</b>";
}

CSS:

.rddlFakeInput
{
    font-weight: bold !important;
}

Thanks,
Shinu.

[Matthew R Longhouse]

That makes the text element bold because of the style override, and it modifies the item element text so it is bold in the drop down list, however, it doesn't seem to actually modify the text element text.  Bolding the text element text is just a simplified example and the actual requirement is that the label be prepended to the item text and that label is a span element with a CSS class applied.

[Nencho]

Hello Matthew,

Indeed such overwrite of the text element is a custom scenario and generally not supported one. This is why, I would suggest you to use the approach that you manage to find, by overwriting the private _updateTextElement function, which you mentioned in your first post.

Regards,
Nencho
Telerik

 

 

[Oscar Emiliano]

Hello Matthew, 

I know that some time has passed since your post, but I just wanted to reply. I has the same 2014 Q1 release but for some reason I'm able to use some bold tags in my dropdownlist. It seems that dropdownlist is processing the tags correctly when they are passed inside the datasource itself.

I have a list of a Model that I'm using and presenting in the dropdownlist (List<Model.Entity>). Then before setting the datasource I added the <b> tags to one its attributes, actually I do that when joining two lists, but a foreach could be use in the case of one single list. By this, the bold tags are recognized and the effect is achieve.

But of course, my scenario is on binding process, and maybe you need it on other events.

Anyway, I hope that this could be of some help.

Regards!