Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Not html-encoding correctly when reorder

7 Answers 87 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
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>
 
<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

Sort by
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:
<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
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:
<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:
<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
Boyan Dimitrov
Telerik team
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.

 
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:
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
Boyan Dimitrov
Telerik team
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.

 
Tags
ListBox
Asked by
Andreas
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Andreas
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or