Clientside Filtering : Randomly Slow

3 posts, 0 answers
  1. Jason
    Jason avatar
    9 posts
    Member since:
    Aug 2009

    Posted 14 Mar Link to this post

    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. Jason
    Jason avatar
    9 posts
    Member since:
    Aug 2009

    Posted 14 Mar Link to this post

    some additional information

    there are about 1300 items in the list

    we are using v2015.401.45

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 17 Mar Link to this post

    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.
Back to Top