Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > RadListBoxItem not rendering HTML

• Bryan Smouse

  Posted on Apr 30, 2010 (permalink)

  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
  

  Attached files

  • after.JPG
  • before.JPG

  Reply

• Answer Genady Sergeev Genady Sergeev

  Posted on Apr 30, 2010 (permalink)

  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.

  Reply


• Ed Intermediate

  Posted on Aug 20, 2010 (permalink)

  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
  

  Reply

• Genady Sergeev Genady Sergeev

  Posted on Aug 24, 2010 (permalink)

  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

  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

  Reply

• Chris

  Posted on May 3, 2011 (permalink)

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

          }

   

      }

  }

  Reply

• Genady Sergeev Genady Sergeev

  Posted on May 6, 2011 (permalink)

  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.

  Reply

• Ed Intermediate

  Posted on May 9, 2011 (permalink)

  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
  

  Reply

• Genady Sergeev Genady Sergeev

  Posted on May 11, 2011 (permalink)

  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

  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.

  Reply

• Chris

  Posted on May 16, 2011 (permalink)

  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.

  Reply

• Vladimir

  Posted on Jun 7, 2011 (permalink)

  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
  

  Reply

• Genady Sergeev Genady Sergeev

  Posted on Jun 10, 2011 (permalink)

  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

  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.

  Reply

• Duneel Master

  Posted on Jun 17, 2011 (permalink)

  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

  Reply

• Genady Sergeev Genady Sergeev

  Posted on Jun 22, 2011 (permalink)

  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

  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.

  Reply

• Chris G.

  Posted on Oct 12, 2011 (permalink)

  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.

  Reply

• Kurt

  Posted on Dec 16, 2011 (permalink)

  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

  Reply

• Genady Sergeev Genady Sergeev

  Posted on Dec 20, 2011 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

• wajimam

  Posted on Feb 5, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > RadListBoxItem not rendering HTML