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 443 Views

ListBox

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

1 Answer, 1 is accepted

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">

<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 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!