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

2 posts, 0 answers
  1. Santhosh
    Santhosh avatar
    15 posts
    Member since:
    May 2012

    Posted 11 May 2012 Link to this post

    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

  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 15 May 2012 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top