This is a migrated thread and some comments may be shown as answers.

RadListBoxItem not rendering HTML

21 Answers 572 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

Bryan Smouse asked on 30 Apr 2010, 02:21 PM

after.JPG

before.JPG

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

21 Answers, 1 is accepted

Accepted

answered on 30 Apr 2010, 02:36 PM

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.

answered on 24 Aug 2010, 01:15 PM

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

answered on 03 May 2011, 10:35 AM

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>fred@fred.com</i>]","fred@fred.com"));

}

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

}

answered on 06 May 2011, 07:34 AM

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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 09 May 2011, 10:49 AM

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

answered on 07 Jun 2011, 03:50 PM

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

answered on 10 Jun 2011, 09:03 AM

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

answered on 16 Dec 2011, 05:28 PM

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

answered on 05 Feb 2012, 10:28 PM

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

answered on 21 Mar 2013, 09:04 PM

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<sup>2</sup> ]" 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).

answered on 21 Mar 2013, 10:06 PM

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<sup>3</sup>]"

// 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.