RadListBoxItem not rendering HTML

[Bryan Smouse]

hello,
I just recently upgraded Rad Controls for ASP.NET AJAX from the Jan 14, 2010 (2009.3.1314) version to the Apr 15, 2010 (2010.1.415) version.  I am using a RadListBox that I was adding items to wrapped in a <span> tag for formatting purposes.  After the upgrade the span is rendered as text.  I looked briefly through the version history and didn't see anything mentioning this change specifically.  Is there something I can do in the latest version to pull this off?

Here's the listbox definition:

<telerik:RadListBox runat="server" ID="rlbOrderList" Width="495px" Height="320px"
                                                AllowDelete="False" AllowReorder="False" Skin="Default" CssClass="cert" AutoPostBack="True"
                                                OnSelectedIndexChanged="rlbOrderList_SelectedIndexChanged">
                                            </telerik:RadListBox>

Here is what I am adding to it:

foreach (eSolutions.HomeHealth.Core.ReadOnly.Order ord in ol)
            {
                rlbOrderList.Items.Add(new RadListBoxItem("<span class='" + ord.OrdersDisciplineCode + "'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><b>" + ord.OrdersDisciplineCode + ":</b>&nbsp;" + ord.OrderDescription.Trim(), rd.OrderID));

            }

I've attached screenshots of before and after the upgrade.

Thanks in advance for your response,
Bryan Smouse

[Genady Sergeev]

Hello Bryan Smouse,

We have changed the RadListBox behavior in a way that HTML entities set as item's text are  no longer rendered as html but instead written as a plain text. If you need to modify the Item's rendering I suggest that you use templates. In your case the ItemsTemplate should look like this:

<ItemsTemplate>
 <span class="myCssHook"><%# DataBinder.Eval(Container, "Text")%></span>
</ItemsTemplate>

The reason behind that decision was that is one wanted to set html as item's text it was not possible. The html entities were rendered as html instead as plain text.

Greetings,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ed]

Hi there,

That's all good but what if I want to show the update on the client without posting back to the server?  I can't use an ItemTemplate then because I'd have to perform a DataBind(), which would involve a round-trip to the server ... wouldn't it?  Is there a way to use ItemTemplates without posting back to the server after transferring an item (which I cannot do)?  Or else is there an override where we can get the HTML showing as HTML like we had before and not as literal text?

Regards,

Ed Graham

[Genady Sergeev]

Hello Ed,

DataBind will not cause postback to the server because it is going to be executed on the server before the page is send to the client. When a page is requested, the ASP.NET runtime creates an instance of the Page class which parses the content of the ASPX file and merges it with the cs part into a compiled page. If there are any DataBind statements they are executed on the server, they are not send to the client. After the page is parsed, the rendered html is outputed to the client, which the databind statements already eval-ed.

Kind regards,
Genady Sergeev
the Telerik team

[Chris]

I have the same issue as Ed.

I want to do a lot client-side so that I can push a lot of the functionality on that side and then do one post-back to the server for the changes.  I was using Html to add elements on the client side and then parsing the text field on submit to get the values I want, which all works fine.

The issue is that  I can't actually display the elements correctly coming back from the server on the initial display because I'm using Html markup which makes things look a lot better with a client-side heavy implementation.

Since I can't seem to figure out how to get ItemTemplates to work or any documentation on how they interact client-side, I guess i'll just have to simplify to not using html.  It'd be great if you guys could add a flag/Property to the control "RenderTextAsHtml" to get around this.

Here's code with the html mark-up to get an idea for what I'm trying to do.

Aspx

<body>
    <form id="form1" runat="server">
    <div>
    <telerik:RadScriptManager ID="rsm" runat="server">
            <Scripts>
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
           </Scripts>
        </telerik:RadScriptManager>
    <telerik:RadListBox id="lbTest" runat="server">
    </telerik:RadListBox>

    <input id="tbName" type="text" />
    <input id="tbAddress" type="text" />
    <input type="button" onclick="add(); return false;" value="Add" />
    <asp:Button ID="btSubmit" Text="Submit" runat="server" OnClick="btSubmit_Click" />

    <script type="text/javascript">

        function add() {
            var name = $telerik.$("#tbName").val();
            var address = $telerik.$("#tbAddress").val();

            var list = $find("<%= lbTest.ClientID %>");
            var items = list.get_items(); list.trackChanges();
            var item = new Telerik.Web.UI.RadListBoxItem();

            var attributes = item.get_attributes();
            attributes.setAttribute("Address", address);
            var text = name + "<br/>  [<i>" + address + "</i>]";
            var value = address;
            item.set_text(text);
            item.set_value(address);
            items.add(item);
            list.commitChanges();
        }

    </script>

    </div>
    </form>
</body>

.cs

using Telerik.Web.UI;

public partial class test_testListBox : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lbTest.Items.Add(new RadListBoxItem("fred<br/>  [<i>[e-mail]</i>]","[e-mail]"));
        }
    }
    protected void btSubmit_Click(object sender, EventArgs e)
    {
        foreach (RadListBoxItem item in lbTest.Items)
        {
            string name = "";
            string address = item.Value;

            int breakIndex = item.Text.IndexOf("<br/>  [<i>");
            if (breakIndex >= 0)
            {
                name = item.Text.Substring(0, breakIndex);
            }

            Response.Write("Name: " + name + " Address: " + address);
        }

    }
}

[Genady Sergeev]

Hi Chris,

I am not sure what is the exact problem that you experience, could you please clarify? With respect to the server-side binding, if you want to place custom html in the RadListBox scaffolding please use ItemTemplates. I suggest that you take a look at this demo for details. If you need to add them on the client side, there is no problem to append html nodes to the RadListBoxItem main element. The main element can be accessed via the item.get_element() property.


Best wishes,
Genady Sergeev
the Telerik team

[Ed]

Hi Chris,

I ended up using a work-around involving a function called when the RadListBox is first loaded on the client:

<script type="text/javascript" language="javascript">

  function RadListBoxLoad(sender)
  {
    // this function is simply to "perturb" the text string (without actually changing it), because the Telerik UI performs an HTML encode otherwise!
    var listBox = sender;
    var allItems = listBox.get_items();
    for (var i = 0; i < allItems.get_count(); i++)
    {
      var listItem = allItems.getItem(i);
      var itemText = listItem.get_text();
      listItem.set_text(itemText.replace('z', 'z'));
    }
  }

</script>

I had two list-boxes (transferring items from one to another), defined as follows:

  <telerik:RadListBox runat="server" ID="rlPapers" DataSourceID="sdsPapers" DataValueField="PaperID" DataTextField="FullTitle" Width="98%" OnClientLoad="RadListBoxLoad">
  </telerik:RadListBox>

...

  <telerik:RadListBox runat="server" ID="rlPapPan" AllowTransfer="true" TransferToID="rlPapers" DataValueField="PaperID" DataTextField="FullTitle" Width="98%" OnClientTransferring="RadListItemTransferring" OnClientTransferred="RadListItemTransferred" OnClientLoad="RadListBoxLoad">
    <ButtonSettings Position="Left" ShowTransferAll="false" />
  </telerik:RadListBox>

The OnClientLoad function does nothing; somehow its presence seems to keep the HTML from being translated into text, though.

Hope that helps,

Ed

[Genady Sergeev]

Hello Chris,

We are glad that you have resolved the issue and thank you for the feedback. I am not sure what difference onClientLoaded function makes, we will have to dig in it.

Best wishes,
Genady Sergeev
the Telerik team

[Chris]

Hi Ed,

Thanks, I've decided not to do a workaround and just went with taking out the html.  I do think a better solution is for Telerik to add a Property/flag that allows html text instead of forcing the item templates which don't seem to be very usable client-side.

[Vladimir]

Hello
I have similar issue I want to transfer items on client and then get transferred items on server side. It works fine. But I have a problem when data item contains html tags.
I don't use item templates. (RadControls for ASP.NET AJAX Q1 2011)

<telerik:RadListBox ID="lstbxAvailableAttributes" runat="server" AllowDelete="false"
                        AllowReorder="false" AllowTransfer="true" AllowTransferOnDoubleClick="true" AutoPostBack="false"
                        DataKeyField="ID" DataSortField="SortIndex" DataTextField="Name" DataValueField="ID"
                        SelectionMode="Multiple" ButtonSettings-VerticalAlign="Middle" EnableDragAndDrop="false"
                        Height="210" Width="250" Skin="DAMDAttr" TransferMode="Move" TransferToID="lstbxSelectedAttributes">
                    </telerik:RadListBox>

                    <telerik:RadListBox ID="lstbxSelectedAttributes" runat="server" AllowDelete="false"
                        AllowReorder="true" AllowTransfer="false" AutoPostBack="false" DataKeyField="ID"
                        DataSortField="SortIndex" DataTextField="DocumentAttributeName" DataValueField="DocumentAttributeID"
                        EnableDragAndDrop="true" SelectionMode="Multiple" Height="210" Width="250" Skin="DAMDAttr"
                        ButtonSettings-VerticalAlign="Middle">

                    </telerik:RadListBox>

if data item contains html tags in Name property f.e. <b>RR</b> and this data item is bound to lstbxAvailableAttributes listbox, it shows plain text like "<b>RR</b>" - and it is ok for me, but when I transfer this item for lstbxSelectedAttributes listbox, it is shown as html,
so I see RR in lstbxSelectedAttributes listbox.
Could you explain me why it is so ? I need plain text in lstbxSelectedAttributes listbox.

Best regards,
Vladimir

[Genady Sergeev]

Hi Vladimir,

This looks like a bug in RadListBox. We will research a possible ways to fix it, meanwhile you can use the following workaround, please paste the following script after the ScriptManager declaration:

<script type="text/javascript">

    Telerik.Web.UI.RadListBoxItem.prototype.get_text = function() {
        if (this._parent._isTemplated)
            return Telerik.Web.UI.RadListBoxItem.callBaseMethod(this, 'get_text');

        return this.get_textElement().innerHTML;
    }

</script>

<telerik:RadListBox runat="server" ID="RadlListBox1" AllowTransfer="true" TransferToID="RadListBox2">
    <Items>
        <telerik:RadListBoxItem Text="<b>fooo</b>" />
    </Items>
</telerik:RadListBox>
<telerik:RadListBox runat="server" ID="RadListBox2">
</telerik:RadListBox>

This should fix the issue. I've also updated your telerik points for the report.

All the best,
Genady Sergeev
the Telerik team

[Duneel]

Hi Genady,

I'm using RadListBox with transfer functionality. The source list box is databind when the page loads. My issue is I cant transfer items from source to target list whithout causing postbak and handling the serverside Transfered event. Since my source lists contains an ItemTemplate nothing gets added to the target list but empty rows. How should I achieve this purely using clientside code? NO POSTBACKS IS MUST.

Thanks!
Duneel

[Genady Sergeev]

Hello Duneel,

Unfortunately client-side transfer using templates is not possible. The reasons for this decision are complex, but are tightly connected with the way ASP.NET handles data binding and postbacks.

Regards,
Genady Sergeev
the Telerik team

[Chris G.]

Agreed.  I tried to use RadListBox today and cannot because of the HTML issue.  Templates will not work for my project.  Please add a property ("RenderHTML=True") to allow this functionality in a future release.

[Jeff]

Hi, and happy holidays to all.

I am just seeing if there as been any progress made on this, or if it is even and issue that is under consideration for inclusion in a future release. As we move into a more "front-end" world, we need the ability to move these items between listboxes on the client, but not lose the ability to actually format these items (which is one of the reasons one would use a Telerik listbox to begin with).

Even if there is a work around that we can do on the client to intercept the "creation" and add the code, that would work for now.

Thanks much.

Kurt

----UPDATE----
right after I posted this, I tried something that I think can handle very basic scenarios. In my case, I simply want to add a <BR> to split the text onto multiple lines. I attached a function to the onclientload event ( OnClientLoad="reformat").

I then do a simple replace of a string I put in. This will allow me to enter the '<BR>' tag.

function

 

 

reformat(sender){

 

listbox = sender;

 

 

var items = listbox.get_items();

 

 

 

for (var i = 0; i < items.get_count(); i++) {

 

 

 

var item = items.getItem(i);

 

 

 

var vid = item.get_element();

 

vid.innerHTML = vid.innerHTML.replace(

 

'||', '<BR>');

 

}

}

Are there any issues with this that I should be aware of?

THanks.

Kurt

[Genady Sergeev]

Hello Kurt,

Thanks for sharing this solution with the community.

As for templating in more complicated scenarios, the only way to utilize it is to use client-side templates when RadListBox is bound to a WebService. We are on our way preparing a demo, therefore I suggest that you stay tuned :)

Regards,
Genady Sergeev
the Telerik team

[wajimam]

Hi,

I have similar like I have add a radlistbox on page with itemtemplate

<telerik:RadListBox runat="server" ID="RadListBox" Height="200px" Width="500px" OnClientSelectedIndexChanged="onSelectedIndexChanged">
    <ItemTemplate>
        <span style="font-weight: bold; color: blue">
            <%# DataBinder.Eval(Container, "Text")%></span><br />
        <span style="font-size: 0.8em">
            <%# DataBinder.Eval(Container, "Attributes['Description']")%></span>

    </ItemTemplate>
    <Items>
        <telerik:RadListBoxItem Text="Andrew Green" Value="3" Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet tincidunt lobortis. Pellentesque sed quam in justo sollicitudin suscipit. Cras varius urna sit amet justo varius nec feugiat nibh feugiat. Nulla facilisi. In hac habitasse platea dictumst. Nam volutpat, odio non consequat aliquet, felis purus semper dolor, ac consectetur tellus." />
        <telerik:RadListBoxItem Text="Chris Brown" Value="1"  Description="Nullam vulputate adipiscing rutrum. In pretium vulputate purus, eget consequat libero aliquet at. Nunc suscipit molestie vestibulum. Aenean ut risus eros, sit amet cursus mi. Suspendisse at aliquet lectus. Donec pulvinar tempus odio, nec auctor diam rutrum non." />
        <telerik:RadListBoxItem Text="David Borough" Value="2"   Description="Aliquam erat volutpat. Quisque varius magna tincidunt elit facilisis pulvinar. Maecenas auctor, lorem at fringilla cursus, diam elit placerat tortor, ac eleifend tortor nisi in lectus. Duis facilisis orci dolor, a bibendum eros. Duis ut tellus vitae quam rutrum volutpat vel at justo." />
        <telerik:RadListBoxItem Text="Evan Gregg" Value="5"  Description="Du har forsøgt at slå op på en underside af Udenrigsministeriets hjemmeside, der enten ikke findes eller er flyttet." />
        <telerik:RadListBoxItem Text="Fiona Smith" Value="6"   Description="Phasellus semper cursus mauris, elementum dignissim felis posuere a. Aliquam massa est, volutpat ac sollicitudin a, congue at odio. Donec eget mi libero, sed blandit sapien. Nullam ut imperdiet mi. Praesent id odio tellus. Nulla egestas sem sed massa lacinia blandit. Aenean" />
        <telerik:RadListBoxItem Text="Frank Smith" Value="7"   Description=" jhhj jhg jhg jhg jh " />
        <telerik:RadListBoxItem Text="George Andropoulos" Value="8"  Description="Aliquam erat volutpat. Quisque varius magna tincidunt elit facilisis pulvinar. Maecenas auctor, lorem at fringilla cursus, diam elit placerat tortor, ac eleifend tortor nisi in lectus. Duis facilisis orci dolor, a bibendum eros. Duis ut tellus vitae quam rutrum volutpat vel at justo." />
        <telerik:RadListBoxItem Text="Peter Christian" Value="4"   Description="Phasellus sempercursus mauris, "elementum" dignissim> felis posuere a. Aliquam massa est, volutpat ac sollicitudin a, congue at odio. Donec eget mi libero, sed blandit sapien. Nullam ut imperdiet mi. Praesent id odio tellus. Nulla egestas sem sed massa lacinia blandit. Aenean" />
        <telerik:RadListBoxItem Text="Stephenen Brown" Value="9"   Description="dgfhfhfhdh" />
    </Items>
</telerik:RadListBox>

when i add new item through js it just add li not text.

js code

var item = new Telerik.Web.UI.RadListBoxItem();
                    $find('<%= RadListBox.ClientID %>').trackChanges();

                    item.set_text("<span class='rlbText'><span class='rlbTemplate'><span style='font-weight: bold; color: blue;'>Item Text</span></span></span>");
                    item.set_value("90");
                    item.select();
                    $find('<%= RadListBox.ClientID %>').get_items().add(item);
                    var attributes = item.get_attributes();
                    attributes.setAttribute("Description", "aaa aaa a aaa aaa aaaa");
                    attributes.setAttribute("Name", "Name");
                    item.scrollIntoView();
                    $find('<%= RadListBox.ClientID %>').commitChanges();

problem is when i add item without itemtemplate it work fine but when add with formatting like itemtemplate it add just plain li.

please review and give me proper guide.

thanks
Waji

[Ken Hawley]

Wow, what an infuriating little issue.  I created a very simple list box to do transfers on the client side similar to your most basic demo.
http://demos.telerik.com/aspnet-ajax/listbox/examples/overview/defaultcs.aspx

The source list box has a databound set of items with datavaluefield and datatextfield called out in the markup.  Here is the code:

<telerik:RadListBox runat="server" ID="rlxxxSupertypes" persistclientchanges="true" Height="250px"  Width="240px"
    buttonsettings-showtransferall="false" CheckBoxes="false"
    AllowTransfer="true" AllowReorder="false"
    allowtransferduplicates="false" selectionmode="Multiple" allowtransferondoubleclick="true" EnableDragAndDrop="true"
    TransferToID="rlxxxSupertypeLegend"
     datatextfield="DisplayNameUomHtml" datavaluefield="xxxSupertypeId" datakeyfield="xxxSupertypeId" >
    <headertemplate>Available xxx Types</headertemplate>
</telerik:RadListBox>
<telerik:RadListBox runat="server" ID="rlxxxSupertypeLegend" Width="200px" Height="250px">
    <headerTemplate>xxx Types Using This Legend</headerTemplate>
</telerik:RadListBox>

It would be difficult to be simpler than that.  The server side has this at page load:

rlxxxSupertypes.DataSource = ActiveDataSet.xxxSupertype.OrderBy( r => r.DisplayName ).ToList();

Here is the odd behavior and why this is a BUG ...

When I bind the left hand list box it contains datatextvalue items that look like ... "foo [ kg/m² ]"  and these are rendered in the box as  "foo [kg/m2]".  That is NOT what I want.  Many of the text items have no html, but most do.

When the items are transferred to the righthand box (with no postback remember) they are rendered as html and the <sup> tag is used to show the text with superscripts ... the way I wanted them originally.

Here comes the funny part.  When I transfer the entry BACK from the target to the source, the html is STILL correctly rendered.  In other words the list item on the left now has kept the non-encoded form from the right.

That is a BUG, gentlemen, not a feature.

If you are going to html encode the text, you should preserve the encoding when items are moved across list boxes.  As a previous entry suggested, you need to make it user selectable (as you have done with the encode attribute in the MVC product).

[Ken Hawley]

Here is how I solved my problem.  I added an OnClientLoad handler to the bound control that executed the following code.

This code could be more compact, but I have included the commentary that was extracted from the Chrome inspector. That is how i figured out how to make it happen.

function OnClientLoadHandler(sender)  {
    var listbox = sender;

    var coll = listbox.get_items();   //: a.RadListBoxItemCollection
    var count = coll.get_count();   //: 95

    var i;
    for( i = 0; i < count; i++ ) {

        // listbox.get_items().getItem(0): a.RadListBoxItem
        var item = coll.getItem( i );

        // listbox.get_items().getItem(0).get_text(): "foo[kg/m<sup>3</sup>]"
        var actualText = item.get_text();

        // listbox.get_items().getItem(0).get_textElement(): span.rlbText
        var span = item.get_textElement();

        // innerHTML: "foo[kg/m&lt;sup&gt;3&lt;/sup&gt;]"
        // innerText: "foo[kg/m<sup>3</sup>]"

        span.innerHTML = actualText;
    }
}

The simplest fix is to slam the innerText of the span into the innerHTML, but that is kinda crude.

By the way, the code patch suggested by Genady above does the OPPOSITE of what is required.  It forces the transfer from the list box to use the encoded HTML rather than the text.  That's OK, if it solves your problem, but I just want the control to do what I told it and render the html instead of encode it.
Thanks.

[Nencho]

Hello Ken,

I had observed and logged the problematic behavior you had described as a bug. Thank you for sharing the workaround with the community. In addition, I had updated your Telerik Points.

Regards,
Nencho
the Telerik team

[Covertix]

Hi,

I saw that the disabled HTML rendering is still present in listbox.

This is a very big security issue as it means that listbox are exposed to XSS.

You must enable HTML rendering to prevent this issue.

In regard to users wanting to write HTML like text that by mistake gets rendered, then they need to write the HTML text as HTML encoded, as rendering happens only once.

[Plamen]

Hi,

The post is quite long and there are lots of issues discussed in it so it is not quite clear what exactly are you having in mind. If you are able to replicate a XSS in the control would you please share the exact code and steps in a support ticket so we could inspect it and be more helpful with a possible solution.

Regards,
Plamen
Telerik by Progress