HTML tags in text element

7 posts, 0 answers
  1. Matthew R Longhouse
    Matthew R Longhouse avatar
    14 posts
    Member since:
    Apr 2007

    Posted 18 Jul 2014 Link to this post

    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;
    };

  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 23 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matthew R Longhouse
    Matthew R Longhouse avatar
    14 posts
    Member since:
    Apr 2007

    Posted 23 Jul 2014 in reply to Nencho Link to this post

    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>');
    }
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2014 in reply to Matthew R Longhouse Link to this post

    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.
  6. Matthew R Longhouse
    Matthew R Longhouse avatar
    14 posts
    Member since:
    Apr 2007

    Posted 24 Jul 2014 in reply to Shinu Link to this post

    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.

  7. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 29 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Oscar
    Oscar avatar
    16 posts
    Member since:
    Sep 2013

    Posted 08 Aug 2014 in reply to Matthew R Longhouse Link to this post

    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!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017