RadTextBox Filtering - Weird behavior

[Sameers]

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

[Peter Milchev]

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

[Sameers]

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

[Peter Milchev]

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

[Sameers]

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