Not html-encoding correctly when reorder

8 posts, 0 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 02 Jun 2014 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2014 in reply to Andreas Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 04 Jun 2014 in reply to Shinu Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2014 in reply to Andreas Link to this post

    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.
  6. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 04 Jun 2014 in reply to Shinu Link to this post

    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
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 05 Jun 2014 Link to this post

    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.

     
  8. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 10 Jun 2014 in reply to Boyan Dimitrov Link to this post

    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
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Jun 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017