FilteredListBox - Client-side RadListBox Filter

7 posts, 1 answers
  1. Jon Shipman
    Jon Shipman avatar
    43 posts
    Member since:
    Nov 2009

    Posted 07 Oct 2011 Link to this post

    Requirements

    RadControls version  2011.2.915.40
    .NET version  4.0
    Visual Studio version  2010
    programming language  C#
    browser support  

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This is an updated version of the project I originally posted here.

    This project combines a RadTextBox with a RadListBox to filter the RadListBox items much like the RadComboBox filters its items.  A video demo can be seen here.

    To run the project, just extract FilteredListBox.zip, expand the FilteredListBox folder and double-click on  FilteredListBox.csproj.  It should open in Visual Studio and then just run it.  I've included the Telerik trial version dlls.

    Notes:

    Up and Down Arrow Usage: If the user uses the up and down arrows to go through a filtered list, it may appear to not work because the up and down arrow will potentially be "stopping" on hidden items.

    Clearing the Filter after a Transfer: I opted to clear the filtered list and the filter after a transfer is made.  Otherwise, if the user transfers the item back while your listbox is filtered, you'll need to re-filter.  Also, that item may not match the filter criteria and seem to disappear to the user.

    CSS:
    body
    {
        font-family: Trebuchet MS, Sans-Serif;
    }
             
    .listBoxHeaders
    {
        color:Green;
        font-weight:bold;
    }
             
    .RadListBox span.rlbText em
    {
        background-color: #E5E5E5;
        font-weight: bold;
        font-style: normal;
    }
             
    .rbClear
    {
        background-image: url(images/clear.png);
        background-position: center;
        background-repeat: no-repeat;
    }


    ASP.NET Markup:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <%--Needed for JavaScript IntelliSense in VS2010--%>
        <%--For VS2008 replace RadScriptManager with ScriptManager--%>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock runat="server" >
    <script type="text/javascript">
     
        function filterList()
        {
            var listbox = $find("<%= rlbAvailable.ClientID %>");
            var textbox = $find('<%= tbAvailableFilter.ClientID %>');
     
            clearListEmphasis(listbox);
            createMatchingList(listbox, textbox.get_textBoxValue());
        }
     
        // Remove emphasis from matching text in ListBox
        function clearListEmphasis(listbox)
        {
            var re = new RegExp("</{0,1}em>", "gi");
            var items = listbox.get_items();
            var itemText;
     
            items.forEach
            (
                function (item)
                {
                    itemText = item.get_text();
                    item.set_text(itemText.replace(re, ""));
                }
            )
        }
     
        // Emphasize matching text in ListBox and hide non-matching items
        function createMatchingList(listbox, filterText)
        {
            if (filterText != "")
            {
                filterText = escapeRegExCharacters(filterText);
     
                var items = listbox.get_items();
                var re = new RegExp(filterText, "i");
     
                items.forEach
                (
                    function (item)
                    {
                        var itemText = item.get_text();
     
                        if (itemText.match(re))
                        {
                            item.set_text(itemText.replace(re, "<em>" + itemText.match(re) + "</em>"));
                            item.set_visible(true);
                        }
                        else
                        {
                            item.set_visible(false);
                        }
                    }
                )
            }
            else
            {
                var items = listbox.get_items();
     
                items.forEach
                (
                    function (item)
                    {
                        item.set_visible(true);
                    }
                )  
            }
        }
     
        function rlbAvailable_OnClientTransferring(sender, eventArgs)
        {
            // Transferred items retain the emphasized text, so it needs to be cleared.
            clearListEmphasis(sender);
            // Clear the list. Optional, but prevents follow up situation.
            clearFilterText();
            createMatchingList(sender, "");
        }
     
        function rbtnClear_OnClientClicking(sender, eventArgs)
        {
            clearFilterText();
     
            var listbox = $find("<%= rlbAvailable.ClientID %>");
                     
            clearListEmphasis(listbox);
            createMatchingList(listbox, "");
        }
                 
        // Clears the text from the filter.
        function clearFilterText()
        {
            var textbox = $find('<%= tbAvailableFilter.ClientID %>');
            textbox.clear();
        }
     
        // Escapes RegEx character classes and shorthand characters
        function escapeRegExCharacters(text)
        {
            return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
        }
     
    </script>
    </telerik:RadCodeBlock>
    <div style="margin-bottom: 10px;">
    <telerik:RadButton ID="btnSave" runat="server"
        Text="Save"
        onclick="btnSave_Click">
        <Icon PrimaryIconCssClass="rbSave" />
    </telerik:RadButton>
    </div>
    <div class="listBoxHeaders">
        <span style="margin-left:50px;">
            Available States
        </span>
        <span style="margin-left:136px;">
            Chosen States
        </span>
    </div>
    <div>
        <table style="position:relative;left:-3px;margin-bottom:2px;">
            <tr>
                <td>
                    <telerik:RadTextBox ID="tbAvailableFilter" runat="server"
                        Width="187px"
                        EmptyMessage="Search States..."
                        autocomplete="off"
                        onkeyup="filterList();" />
                </td>
                <td>
                    <telerik:RadButton ID="rbtnClear" runat="server"
                        Width="22px"
                        AutoPostBack="false"
                        OnClientClicking="rbtnClear_OnClientClicking">
                        <Icon PrimaryIconCssClass="rbClear" />
                    </telerik:RadButton>
                </td>
            </tr>
        </table>
    </div>
    <telerik:RadListBox ID="rlbAvailable" runat="server"
        Height="250px"
        Width="250px"
        AllowTransfer="true"
        AllowTransferOnDoubleClick="true"
        TransferToID="rlbChosen"
        EnableDragAndDrop="true"
        OnClientTransferring="rlbAvailable_OnClientTransferring"
        ButtonSettings-ShowTransferAll="false"/>
    <telerik:RadListBox ID="rlbChosen" runat="server"
        Height="250px"
        Width="250px"
        EnableDragAndDrop="true"
        AllowReorder="true"/>
    <br /><br />
    <strong>States I've Lived In:</strong>
    <asp:Repeater ID="rptStates" runat="server">
        <ItemTemplate>
            <div><%# Eval("Text") %></div>
        </ItemTemplate>
    </asp:Repeater>

    C#
    using System;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                rlbAvailable.LoadContentFile("states.xml");
            }
        }
     
        protected void btnSave_Click(object sender, EventArgs e)
        {
            rptStates.DataSource = rlbChosen.Items;
            rptStates.DataBind();
        }
     
    }
  2. Answer
    Andre Light
    Andre Light avatar
    11 posts
    Member since:
    Apr 2010

    Posted 26 Apr 2013 Link to this post

    This is a brilliant idea; I'm going to use it.  I wish Telerik would support a RadComboBox Multi-select (Checkboxes) + Filter Contains functionality, but until then, this is a good solution.  In fact, I think Telerik should have this functionality included with their RadListBox.

    Thanks!
    Andre
  3. Lou
    Lou avatar
    5 posts
    Member since:
    Dec 2013

    Posted 29 Jan 2014 in reply to Jon Shipman Link to this post

    Hello Jon,

    I have tried implementing this, however within the filterList() function
    $find always returns null. I changed it to $.find and it gets past this now, but then in the clearListEmphasis function, I am getting a JS error
    on listbox.get_items()
    Error: Object doesn't support this property or method

    Any idea what I'm doing wrong?
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 03 Feb 2014 Link to this post

    Hello,

    I would like to clarify that I run project and it works fine. Could you please confirm that you are facing the described problem without modifying the code? I have attached the project with latest trial version of our controls. Please try to run the project and let us know how that worked.


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  5. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 27 Oct 2015 Link to this post

    Hi,

    URL: http://telerik_test.ximnet.com.my/radlistbox_filter.aspx

    I tried the example but my listbox is using itemtemplate.
    After user search, other control in the item is destroyed and left with item name only.
    How can we solve this?

     

  6. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 28 Oct 2015 Link to this post

    Hello,

    Тhe reason for the experienced issue in this custom scenario is the fact that the text of the items is altered in the createMatchingList function, by inserting em tags. Consider avoiding such modification of the text in  the items, in order to persist the proper behavior - remove
    item.set_text(itemText.replace(re, "<em>" + itemText.match(re) + "</em>")); in the createMatchingList  function.

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Ashwin
    Ashwin avatar
    6 posts
    Member since:
    Apr 2013

    Posted 19 Apr Link to this post

    Hello There,

     

    I am using the given solution and it is working perfectly fine. But now a days I am facing one issue that if my list contains 5000 records and when I start typing in search text box, browser gets hanged. FF gives me scripting error and Chrome gives me no result and  it keeps on waiting.

     

    Please let me know, anybody faced such issue and what is the possible solution for this.

     

    Thanks
    Ashwin

Back to Top