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

Not html-encoding correctly when reorder

7 Answers 137 Views

ListBox

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

Andreas asked on 02 Jun 2014, 12:09 PM

Hi,

When reordering items, the text is not html-encoded correctly!

Sample:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="listbox.aspx.vb" Inherits="TestaTredjepartWeb.listbox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Test</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="s" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadListBox ID="rlb" runat="server" Width="330px" AllowReorder="true" EnableDragAndDrop="true">

<Items>

<telerik:RadListBoxItem Text="<aaa>" />

<telerik:RadListBoxItem Text="<bbb>" />

<telerik:RadListBoxItem Text="<ccc>" />

<telerik:RadListBoxItem Text="<ddd>" />

<telerik:RadListBoxItem Text="<eee>" />

<telerik:RadListBoxItem Text="<fff>" />

<telerik:RadListBoxItem Text="<ggg>" />

<telerik:RadListBoxItem Text="<hhh>" />

</Items>

</telerik:RadListBox>

</div>

</form>

</body>

</html>

In the sample: try to reorder items, this makes the item text disappear!

Regards
Andreas

7 Answers, 1 is accepted

answered on 04 Jun 2014, 05:25 AM

Hi Andreas,

As a work around please try the following sample code snippet which works fine at my end.

ASPX:

<telerik:RadListBox ID="rlb" runat="server" Width="330px" AllowReorder="true" EnableDragAndDrop="true">

<Items>

<telerik:RadListBoxItem Text="Waa" />

<telerik:RadListBoxItem Text="bbb" />

<telerik:RadListBoxItem Text="ccc" />

<telerik:RadListBoxItem Text="ddd" />

<telerik:RadListBoxItem Text="eee" />

<telerik:RadListBoxItem Text="fff" />

<telerik:RadListBoxItem Text="ggg" />

<telerik:RadListBoxItem Text="hhh" />

</Items>

</telerik:RadListBox>

CSS:

<style type="text/css">

span.rlbText:before

{

content:"<";

}

span.rlbText:after

{

content:">";

}

</style>

Thanks,
Shinu.

answered on 05 Jun 2014, 02:57 AM

Hi Andreas,

Please have a look into the sample code snippet which shows items in the DataBase and explicitly adding an item on Button Click with in '< >' .

ASPX:

<telerik:RadListBox ID="rlb" runat="server" Width="330px" AllowReorder="true" EnableDragAndDrop="true" DataSourceID="SqlDataSource1" DataTextField="CompanyName" DataValueField="CustomerID">

</telerik:RadListBox>

<telerik:RadTextBox ID="radtxtAddItem" runat="server">

</telerik:RadTextBox>

<telerik:RadButton ID="radbtnAddItem" runat="server" Text="Add Item" OnClick="radbtnAddItem_Click">

</telerik:RadButton>

CSS:

<style type="text/css">

span.rlbText:before

{

content: "<";

}

span.rlbText:after

{

content: ">";

}

</style>

C#:

protected void radbtnAddItem_Click(object sender, EventArgs e)

{

//adding a new item to the RadListBox

RadListBoxItem item = new RadListBoxItem();

item.Text = radtxtAddItem.Text;

rlb.Items.Add(item);

}

Let me know if you have any concern.
Thanks,
Shinu.

answered on 05 Jun 2014, 04:13 AM

Hi,

I don't think you understand what I mean...
What if the datasource (in your case CompanyName) contains html-tags for some reason!
Like this: "This is my text <test> and here it ends".

That would be the same result as the following sample:

<telerik:RadListBox ID="rlb" runat="server" Width="330px" AllowReorder="true" EnableDragAndDrop="true">

<Items>

<telerik:RadListBoxItem Text="This is my text1 <test> and here it ends" />

<telerik:RadListBoxItem Text="This is my text2 <test> and here it ends" />

<telerik:RadListBoxItem Text="This is my text3 <test> and here it ends" />

<telerik:RadListBoxItem Text="This is my text4 <test> and here it ends" />

</Items>

</telerik:RadListBox>

In this case the <test> part of the text disappears when moving up and down.

Regards
Andreas

answered on 05 Jun 2014, 10:44 AM

Hello,

Please use the RadListBox client-side event OnClientReorder and set the span element value to the item text as shown:
//JavaScript

function OnClientReordered(sender, args) {

var DOMEl = args.get_item().get_element();

var itemText = args.get_item().get_text();

var spanText = $telerik.$(DOMEl).find("span.rlbText");

$telerik.$(spanText).text(itemText);

}

Regards,
Boyan Dimitrov
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.

answered on 10 Jun 2014, 06:49 AM

Hi,

Well, that works for this sample...
But when running in LightWeight mode this script wont fix it...
I tried to fix the script by doing this instead when lightweight:

function OnClientReordered(sender, args)

{

var DOMEl = args.get_item().get_element();

var itemText = args.get_item().get_text();

$telerik.$(DOMEl).text(itemText);

}

But this wont work when having icons for each item (ImageUrl is set on the RadListBoxItem).
The icons will be removed when reordering...
So is there a fix when using lightweight and setting imageurl for items?
Or should I wait for the next Telerik release?

Regards
Andreas

answered on 13 Jun 2014, 07:02 AM

Hello Andreas,

This problem is due to the fact that the item text is interpreted as a HTML element which is browser behavior.

Still I found a workaround for this case when RadListBox is in Lightweight render mode and there is an image for the item:
//JavaScript

function OnClientReordered(sender, args) {

var DOMEl = args.get_item().get_element();

var itemText = args.get_item().get_text();

$telerik.$(DOMEl).text(itemText);

var srcAttr = args.get_item().get_imageUrl();

$telerik.$(DOMEl).prepend($('<img src=' + srcAttr + ' alt="" class="rlbImage">'));

}

Regards,
Boyan Dimitrov
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.