RadTextBox Filtering - Weird behavior

5 posts, 1 answers
  1. Sameers
    Sameers avatar
    6 posts
    Member since:
    May 2017

    Posted 11 Feb Link to this post

    Hi,
        I have a weird issue with rad listbox filtering. I tried to attach that, but the post didn't allowed me to. I will write the code here.

    <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="script1" runat="server"></telerik:RadScriptManager>
            <asp:Panel ID="pnlMainFields" runat="server">
                    <table>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <h3>Available Fields</h3>
                                            <table>
                                                <tr>
                                                    <td>
                                                        <asp:CheckBox ID="chkShowAdvanced" runat="server" Text="Show advanced columns" AutoPostBack="true" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <telerik:RadTextBox ID="tbAvailableFilter" runat="server"
                                                            Width="187px"
                                                            EmptyMessage="Search ..."
                                                            autocomplete="off"
                                                            onkeyup="filterList();" />
                                                        <telerik:RadButton ID="rbtnClear" runat="server"
                                                            Width="22px"
                                                            AutoPostBack="false"
                                                            OnClientClicking="rbtnClear_OnClientClicking">
                                                            <Icon PrimaryIconCssClass="rbClear" />
                                                        </telerik:RadButton>
                                                    </td>
                                                </tr>
                                            </table>
                                                 
     
                                        </td>
                                        <td></td>
                                        <td>
                                            <h3>Selected Fields</h3>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align:top">
                                            <telerik:RadListBox ID="lstAvailable" runat="server"
                                                            Height="250px"
                                                            Width="250px"
                                                            AllowTransfer="true"
                                                            AllowTransferOnDoubleClick="true"
                                                            TransferToID="lstSelected"
                                                            EnableDragAndDrop="true"
                                                            OnClientTransferring="lstAvailable_OnClientTransferring"
                                                            ButtonSettings-ShowTransferAll="false" SelectionMode="Multiple" />
                                        </td>
                                        <td style="vertical-align: middle">
                                            <asp:ImageButton ID="btnMoveToSelected" runat="server" ImageUrl="/images/app/Button-Add.jpg" Visible="false" /><br />
                                            <asp:ImageButton ID="btnMoveToAvailable" runat="server" ImageUrl="/images/app/Button-Remove.jpg" Visible="false" />
                                        </td>
                                        <td>
                                            <telerik:RadListBox ID="lstSelected" runat="server"
                                                Height="250px"
                                                Width="250px"
                                                EnableDragAndDrop="true"
                                                AllowReorder="true" />
                                         </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                    </table>
                </asp:Panel>
        </div>
        <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
     
            function filterList() {
                var listbox = $find("<%= lstAvailable.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 lstAvailable_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("<%= lstAvailable.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>
    </form>

     

    The code to populate data is

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     
           If Not Page.IsPostBack Then
               ListAvailableFields()
           End If
       End Sub
     
       Private Sub ListAvailableFields()
     
           lstAvailable.Items.Clear()
           For temp As Integer = 1 To 10
               Dim name As String = $"Enabled {temp}"
               lstAvailable.Items.Add(New Telerik.Web.UI.RadListBoxItem(name, name))
     
               name = $"Disabled {temp}"
               lstAvailable.Items.Add(New Telerik.Web.UI.RadListBoxItem(name, name))
     
     
           Next
     
       End Sub

     

         Now, type something in the list. For example, type "Enabled" so that it filters all enabled columns.

         Once filtered , Click on first search result, HOLD down the shift key and Click on the last item in the grid to select ALL values in the listbox.

         Click on the right arrow and it should Copy all the selected values to the right grid.

          However, you will notice that it copied over Enabled xx as well as Disabled xx which was not in the search result.

        That is a problem, I filtered only "Enabled" but it moved "Disabled" as well.

         It seems list is hiding the items only, but when you select multiple using SHIFT key, it includes them. Selecting as many items as you can, using one at a time, will not be an issue.

     

          Any thoughts on this should be appreciated.

          Thank you

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    505 posts

    Posted 14 Feb Link to this post

    Hello Sameers,

    The provided code seems to work properly as demonstrated in the following .gif:



    If the issue is replicated only in Internet Explorer, please ensure the Compatibility Mode is disabled: https://www.telerik.com/support/kb/aspnet-ajax/details/different-appearance-in-internet-explorer-on-local-and-production-servers#disable-compatibility-mode.

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Sameers
    Sameers avatar
    6 posts
    Member since:
    May 2017

    Posted 14 Feb in reply to Peter Milchev Link to this post

    Thank you Peter for your reply.

    Well, the issue persists in both IE and Chrome. I confirmed that in IE, the compatibility is OFF.
    One thing I forgot to mention is that I am using Telerik Control version 2014.3.1209.35
    Is that what could be an issue and you might be using a latest version and working well on your end?

    I have an sample project as well, describing the issue, But I am not allowed to attach a ZIP file to the post.

    Thank you

  4. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    505 posts

    Posted 15 Feb Link to this post

    Hello Sameers,

    Yes, the issue is in the old version used, used to be a bug: RadListBox in multi-selection scenario when user selects multiple items with shift key it will select the invisible items as well. The issue is fixed as of Q2 2015 (2015.2.623). 

    Upgrading to this or more recent version should automatically resolve the issue.

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Sameers
    Sameers avatar
    6 posts
    Member since:
    May 2017

    Posted 15 Feb in reply to Peter Milchev Link to this post

    Thank you, will check if we can upgrade to latest version :)

     

Back to Top