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

How to clear item selection in Destination listbox when user selecting items in source listbox

1 Answer 381 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Santhosh
Top achievements
Rank 1
Santhosh asked on 11 May 2012, 04:42 PM
Hi,
I am using 2 Radlistbox in my project for item transfer from source to destination list boxes and vice versa.
When user selecting item in soure listbox then automatically clear item selections in destination listbox.
i done it by using server side event OnSelectedIndexChanged of Radlistbox by adding RadlistboxSource.ClearSelection();
but how to do without OnSelectedIndexChanged event.

Please support.

Thanks.
Santhosh Naik

1 Answer, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 15 May 2012, 04:04 PM
Santhosh:

You can clear the Source List Box and the Destination List Box by using client-side JavaScript functions as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<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 language="javascript" type="text/javascript">
    functionClearDestinationListBoxOnSelectedIndexChanged(sender, args) {
 
        var listbox = $find("<%= RadListBoxDestination.ClientID %>");
        listbox.trackChanges();
        listbox.clearSelection();
        listbox.commitChanges();
 
     }
 
     functionClearSourceListBoxOnSelectedIndexChanged(sender, args) {
 
         var listbox = $find("<%= RadListBoxSource.ClientID %>");
         listbox.trackChanges();
         listbox.clearSelection();
         listbox.commitChanges();
 
     }
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadListBox runat="server" ID="RadListBoxSource" Height="200px" Width="230px"
            AllowTransfer="true" TransferToID="RadListBoxDestination" OnClientSelectedIndexChanged="ClearDestinationListBoxOnSelectedIndexChanged" >
            <items>
            <telerik:RadListBoxItem Text="Argentina" />
            <telerik:RadListBoxItem Text="Australia" />
            <telerik:RadListBoxItem Text="Brazil" />
            <telerik:RadListBoxItem Text="Canada" />
            <telerik:RadListBoxItem Text="Chile" />
            <telerik:RadListBoxItem Text="China" />
            <telerik:RadListBoxItem Text="Egypt" />
            <telerik:RadListBoxItem Text="England" />
            <telerik:RadListBoxItem Text="France" />
            <telerik:RadListBoxItem Text="Germany" />
            <telerik:RadListBoxItem Text="India" />
            <telerik:RadListBoxItem Text="Indonesia" />
            <telerik:RadListBoxItem Text="Kenya" />
            <telerik:RadListBoxItem Text="Mexico" />
            <telerik:RadListBoxItem Text="New Zealand" />
            <telerik:RadListBoxItem Text="South Africa" />
            <telerik:RadListBoxItem Text="USA" />
        </items>
        </telerik:RadListBox>
        <telerik:RadListBox runat="server" ID="RadListBoxDestination" Height="200px" Width="200px" OnClientSelectedIndexChanged="ClearSourceListBoxOnSelectedIndexChanged" />
    </div>
    </form>
</body>
</html>
 
See the code in action at: http://screencast.com/t/LKcQQp5z

I hope this helps!
Tags
ListBox
Asked by
Santhosh
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or