This is a migrated thread and some comments may be shown as answers.

Clientside Filtering : Randomly Slow

2 Answers 47 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 2
Jason asked on 14 Mar 2016, 08:06 AM

I'm getting some weird go-slows with the following script.

Most of the time, the filtering works in about 50ms. Other times, it takes upwards of 8000ms. When this happens firefox pops up them message that the script is taking too long to execute (continue stop etc).

I've put some timers in to try and find out where it's chugging, and it is on this line

var item = listItems.getItem(count);

as to why... well that's the million dollar question

the mark up is contained as follows

Master page > Page > RadPageView > UserControl

(all declared at design time ~ no dynamically loaded controls)

The Code

-------------

    //
    // Escapes RegEx character classes and shorthand characters
    //
    escapeRegExCharacters: function (text)
    {
        return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    },

    //
    // filter items in a Rad List box
    //
    filterListBox: function (pSearchBoxClientID, pUsersClientID)
    {
        var textBox = $('#'+pSearchBoxClientID);
        var listBox = $find(pUsersClientID);

        if (textBox != null && listBox != null)
        {
            var filterText = Core.escapeRegExCharacters(textBox.val());
            var expression = new RegExp(filterText, "i");
            var listItems = listBox.get_items();

            for (var count = 0; count < listItems.get_count(); count++)
            {
                var item = listItems.getItem(count);              
                item.set_visible(filterText == "" || item.get_text().match(expression));
            }
        }
    }

    <asp:TextBox id="txtSearchLinked" runat="server" CssClass="TextInput" Width="100%" />

            <telerik:RadListBox
                runat="server"
                ID="lstAccessInRole"
                SelectionMode="Multiple"
                Height="450px"
                width="600px"
                AllowTransfer="true"
                TransferToID="lstAccessNotInRole"                
                AutoPostBack="false"
                AutoPostBackOnTransfer="false"
                >                
                <ButtonSettings TransferButtons="TransferFrom,TransferTo" />                
            </telerik:RadListBox>   

 

        /// <summary>
        /// Sets the JQuery event on the search text box
        /// </summary>
        private void SetupFilterEvent()
        {
            txtSearchLinked.Attributes.Add("onkeyup", "javascript:Core.filterListBox('" + txtSearchLinked.ClientID + "', '" + lstAccessInRole.ClientID + "');");
        }

 

 

 

2 Answers, 1 is accepted

Sort by
0
Jason
Top achievements
Rank 2
answered on 14 Mar 2016, 11:30 AM

some additional information

there are about 1300 items in the list

we are using v2015.401.45

0
Hristo Valyavicharski
Telerik team
answered on 17 Mar 2016, 08:40 AM
Hi Jason,

Can you try to use this code:
<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <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>
 
    <script type="text/javascript">
        var listBox;
        var listItems;
 
        var keyUp = function (e) {
            var filterText = e.target.value;
 
            var expression = new RegExp(filterText, "i");
            var listItems = listBox.get_items();
            for (var count = 0; count < listItems.get_count() ; count++) {
                var item = listItems.getItem(count);
                item.set_visible(filterText == "" || item.get_text().match(expression));
            }
        };
 
        function pageLoad() {
            listBox = $find("lstAccessInRole");
            listItems = listBox.get_items();
            $("#txtSearchLinked").on("keyup", keyUp);
        }
    </script>
 
    <asp:TextBox ID="txtSearchLinked" runat="server" CssClass="TextInput" Width="100%" />
 
    <telerik:RadListBox
        runat="server"
        ID="lstAccessInRole"
        SelectionMode="Multiple"
        Height="450px"
        Width="600px"
        AllowTransfer="true"
        AutoPostBack="false"
        AutoPostBackOnTransfer="false">
        <ButtonSettings TransferButtons="TransferFrom,TransferTo" />
    </telerik:RadListBox>
</form>
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        for (int i = 0; i < 1300; i++)
        {
            lstAccessInRole.Items.Add(new RadListBoxItem("Item " + i));
        }
    }
}

Does it help? 

Regards,
Hristo Valyavicharski
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
ListBox
Asked by
Jason
Top achievements
Rank 2
Answers by
Jason
Top achievements
Rank 2
Hristo Valyavicharski
Telerik team
Share this question
or