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

clearSelection not working on source ListBox in OnClientTransferred event

3 Answers 119 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Gunnar Skogen
Top achievements
Rank 1
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

Sort by
0
Genady Sergeev
Telerik team
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
0
Gunnar Skogen
Top achievements
Rank 1
answered on 12 Jul 2010, 07:24 AM
Thanks Genady,

Timeout: Cause of bug probably inside the Browsers/DHTML then as I have experienced this kind of problems back in the day when doing stuff like this - creating elements in DHTML on the fly  and doing other stuff at the same time causes problems like this. Usually some well placed alerts inside the code makes things "work".
If Telerik has a strategy around stuff like this, that would be nice, even if it is a timeout :)


Best Regards

Gunnar Skogen  
0
T. Tsonev
Telerik team
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
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
Tags
ListBox
Asked by
Gunnar Skogen
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
Gunnar Skogen
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or