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

clearSelection not working on source ListBox in OnClientTransferred event

3 Answers 181 Views

ListBox

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

Gunnar Skogen asked on 07 Jul 2010, 02:56 PM

Hi,

Default behavior when transferring items between ListBoxes seem to be that the adjacent item to the moved item in the source listbox is selected. This is not what I wanted, so I tried various ways to unselect all in the source listbox after a transfer.
When transferring items between two listboxes (AllowTransfer="true"), the ListBox.clearSelection dows not work on the source ListBox.
I also tried using this statement from another related thread:

$telerik.$(sourceListBox._getGroupElement()).focus();

but this does not help.

Only way I made it work is the rather graceless way of using

OnClientSelectedIndexChanged

as shown in this code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestListBox.aspx.cs" Inherits="TestListBox" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    <Scripts> 
        
                        <%--Needed for JavaScript IntelliSense in VS2010--%> 
        
                        <%--For VS2008 replace RadScriptManager with ScriptManager--%> 
        
                        <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 lastSrcLB = "";  
        
                    // Maintain edits in  
        
                    function ListBoxItemTransferred(sender, event) {  
        
                        var destinationListBox = event.get_destinationListBox();  
        
                        var sourceListBox = event.get_sourceListBox();  
        
                        //$telerik.$(destinationListBox._getGroupElement()).focus();  
        
                        destinationListBox.clearSelection();  
        
                        lastSrcLB = sourceListBox.get_id();  
        
                        //$telerik.$(sourceListBox._getGroupElement()).focus();  
        
                        sourceListBox.clearSelection();  
        
                    }  
        
                    function SelectedIndexChanged(sender, e) {  
        
                        var item  = e.get_item();  
        
                        alert(sender.get_id() + "::" + lastSrcLB  + "::" + item.get_text());  
        
                        if (sender.get_id() == lastSrcLB) {  
        
                            lastSrcLB = "";  
        
                            event.returnValue = false;  // To late  
        
                            event.cancelBubble = true;  
        
                            item.set_selected(false);  
        
                            return false;  
        
                        }  
        
                    }  
        
                </script> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                </telerik:RadAjaxManager> 
        
                <div> 
        
                                            <telerik:RadListBox ID="SystemUserListBox1"   
        
                                                            runat="server"   
        
                                                            OnClientTransferred="ListBoxItemTransferred"   
        
                                                            OnClientSelectedIndexChanged="SelectedIndexChanged" 
        
                                                            AllowTransfer="True"   
        
                                                            TransferToID="TeamUserListBox"   
        
                                                            >                  
        
                                        <ButtonSettings Position="Bottom" HorizontalAlign="Center" /> 
        
                                                <Items> 
        
                                                    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" /> 
        
                                                    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" /> 
        
                                                    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" /> 
        
                                                    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" /> 
        
                                                </Items> 
        
                                        </telerik:RadListBox> 
        
                                        <telerik:RadListBox ID="TeamUserListBox"   
        
                                                            runat="server"   
        
                                                            OnClientTransferred="ListBoxItemTransferred"    
        
                                                            OnClientSelectedIndexChanged="SelectedIndexChanged" 
        
                                                            > 
        
                                        </telerik:RadListBox> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html> 
        
            Any better alternatives?

            (Would be nice if this behaviour could be set though properties..)

            Best Regards

            Gunnar Skogen

3 Answers, 1 is accepted

answered on 09 Jul 2010, 03:48 PM

Hello Gunnar Skogen,

I believe that this is a bug inside RadListBox functionality. We will fix it, meanwhile you can use the following workaround, wrap the clearSelection method invocation inside setTimeout. Example code:

function onClientTransferred(sender, args) {

setTimeout(function() { sender.clearSelection(); }, 100);

}

All the best,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 15 Jul 2010, 10:04 AM

Hello Gunnar,

Timeouts are sometimes needed in order to give the browser a chance to update it's DOM state. In this case the problem is in the control itself - the selection is moved after the transferred event firs which is misleading.

We'll take care to fix this. As a token of gratitude for your involvement your Telerik points have been updated.

Greetings,
Tsvetomir Tsonev
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

clearSelection not working on source ListBox in OnClientTransferred event

3 Answers, 1 is accepted