Clientside Filtering : Randomly Slow

[Jason]

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 + "');");
        }

 

 

 

[Jason]

some additional information

there are about 1300 items in the list

we are using v2015.401.45

[Hristo Valyavicharski]

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