Edit this page

Escape HTML Tags in the Text of the Items When They Are Created on the Client-side

Sometimes is needed to add html tags in the text of the RadListBox items. By default when this is done from the mark-up, when data binding or from the server-side these html tags are not rendered by the browse. They are presented as a plain text along with the other characters of the RadListBox’s item.

<telerik:radlistbox id="RadListBox1" runat="server" skin="Office2010Blue">
        <Items>
            <telerik:RadListBoxItem Text="<b>Item1</b>" />
            <telerik:RadListBoxItem Text="<i>Item2</i>" />
        </Items>
</telerik:radlistbox>
<script type="text/javascript">
    function pageLoad() {
        var newItem = new Telerik.Web.UI.RadListBoxItem();
        newItem.set_text("<b><i>Item3</i></b>");
        var listbox = $find("<%= RadListBox1.ClientID %>")
        listbox.get_items().add(newItem);
    }
</script>

LisBox Without Encoding

This functionality is not presented when adding items on the client-side. When this is done the browser renders the html tags. In order to deal with this limitation one should escape the text containing these tags using the implementation suggested below:

<telerik:radlistbox id="RadListBox1" runat="server" skin="Office2010Blue">
        <Items>
            <telerik:RadListBoxItem Text="<b>Item1</b>" />
            <telerik:RadListBoxItem Text="<i>Item2</i>" />
        </Items>
</telerik:radlistbox>
<script type="text/javascript">
    function pageLoad() {
        var newItem = new Telerik.Web.UI.RadListBoxItem();
        newItem.set_text(encode("<b><i>Item3</i></b>"));
        var listbox = $find("<%= RadListBox1.ClientID %>")
        listbox.get_items().add(newItem);
    }

    function encode(value) {
        return Replace(value, {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;'
        });
    }

    function Replace(value, substitutes) {
        for (var substitute in substitutes)
            value = value.replace(new RegExp(substitute, 'g'), substitutes[substitute]);

        return value;
    }
</script>

ListBox With Encoding

If the newly added items will be persisted upon post-back, additional action should be performed. The approach is shown bellow:

<telerik:radlistbox id="RadListBox1" runat="server" skin="Office2010Blue">
        <Items>
            <telerik:RadListBoxItem Text="<b>Item1</b>" />
            <telerik:RadListBoxItem Text="<i>Item2</i>" />
        </Items>
</telerik:radlistbox>
function pageLoad() {
    var newItem = new Telerik.Web.UI.RadListBoxItem();
    newItem.set_text(encode("<b><i>Item3</i></b>"));
    newItem.get_attributes().setAttribute("Encoded", "encoded");
    var listbox = $find("<%= RadListBox1.ClientID %>")
    listbox.trackChanges();
    listbox.get_items().add(newItem);
    listbox.commitChanges();
}

function encode(value) {
    return Replace(value, {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    });
}

function Replace(value, substitutes) {
    for (var substitute in substitutes)
        value = value.replace(new RegExp(substitute, 'g'), substitutes[substitute]);

    return value;
}
protected void Page_Load(object sender, EventArgs e)
{
    foreach (RadListBoxItem item in RadListBox1.Items)
    {
        if (item.Attributes["Encoded"] == "encoded")
        {
            item.Text = System.Web.HttpUtility.HtmlDecode(item.Text);
        }
    }
}   
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    For Each item As RadListBoxItem In RadListBox1.Items
        If item.Attributes("Encoded") = "encoded" Then
            item.Text = System.Web.HttpUtility.HtmlDecode(item.Text)
        End If
    Next
End Sub

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy