Hi,
When reordering items, the text is not html-encoded correctly!
Sample:
In the sample: try to reorder items, this makes the item text disappear!
Regards
Andreas
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
0

Shinu
Top achievements
Rank 2
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:
CSS:
Thanks,
Shinu.
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.
0

Andreas
Top achievements
Rank 1
answered on 04 Jun 2014, 05:37 AM
Hi,
Of course in my sample it will work with this, but our real world application doesn't have these simple texts!!!
In our real world application, these texts can even be entered by end users (stored in database) and can contain just about anything.
The sample was only intended to display the bug with html-encoding.
Is there any real workaround that fixes the bug?
Regards
Andreas
Of course in my sample it will work with this, but our real world application doesn't have these simple texts!!!
In our real world application, these texts can even be entered by end users (stored in database) and can contain just about anything.
The sample was only intended to display the bug with html-encoding.
Is there any real workaround that fixes the bug?
Regards
Andreas
0

Shinu
Top achievements
Rank 2
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:
CSS:
C#:
Let me know if you have any concern.
Thanks,
Shinu.
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.
0

Andreas
Top achievements
Rank 1
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:
In this case the <test> part of the text disappears when moving up and down.
Regards
Andreas
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
0
Hello,
Please use the RadListBox client-side event OnClientReorder and set the span element value to the item text as shown:
//JavaScript
Regards,
Boyan Dimitrov
Telerik
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.
0

Andreas
Top achievements
Rank 1
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:
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
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
0
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
Regards,
Boyan Dimitrov
Telerik
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.