Cancel Selection and return Selected Items to Source

2 posts, 0 answers
  1. Brad
    Brad avatar
    6 posts
    Member since:
    Sep 2011

    Posted 13 Feb Link to this post

    I am trying to write a function that if a condition exists,  it cancels the selection and provides an alert("something is wrong") to the user.  This works; however, when the selection is cleared from the destination box, it no longer appears in the source box.

    Here is html for Listbox:

     <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="boxSource" Height="350px" Width="250px"
                                        AllowReorder="false"
                                        AllowTransfer="true"
                                        AllowTransferDuplicates="false"
                                        SelectionMode="Multiple"
                                        TransferMode="Move"
                                        TransferToID="boxDestination">
                                        <HeaderTemplate>
                                            Available Fields
                                        </HeaderTemplate>
                                    </telerik:RadListBox>
                                    <%-- Selected Fields --%>
                                    <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="boxDestination" Height="350px" Width="250px"
                                        SelectionMode="Multiple"
                                        AllowReorder="true">
                                        <HeaderTemplate>
                                            Zone Fields
                                        </HeaderTemplate>
                                    </telerik:RadListBox>

     

    Here is jQuery:

                var zoneNo = $("table.template td.active").attr("data-zone");

                var listBox = $find("<%= boxDestination.ClientID %>");
                //get current selected items
                var items = listBox.get_items(); 
                
                //store
                if (items.get_count() > 0) {
                    if(zoneNo == undefined )
                    {
                        items.clear();
                        return alert("Please select a zone");
                    }
                    let itemsCopy = Object.assign({}, items);
                    $.data(listBox, zoneNo, itemsCopy);
                }

  2. Eric R | Senior Technical Support Engineer
    Admin
    Eric R | Senior Technical Support Engineer avatar
    429 posts

    Posted 17 Feb Link to this post

    Hi Brad,

    Thank you for providing the code snippets. Although, I am unable to see where the event is firing and this might the cause of the issue. However, the RadListBox includes a powerful Client-Side API that can be used for such a scenario. Note that this could be achieved in a number of different ways and one example is below.

    Using the OnClientTransferring Event we can iterate over the selected items to be transferred and compare them to an external source. If they exist we can then cancel the transfer. 

    <script type="text/javascript">
        function OnClientTransferring(sender, args) {
            var items = args.get_items();   // get the selected items
    
            //  The following 2 lines are just sample conditional items
            var nozEl = document.getElementById("noZone").innerText;    
            var nozItems = nozEl.split(',');
    
            //  generic logic for checking which items are selected
            for (var i = 0; i < items.length; i++) {
                for (var j = 0; j < nozItems.length; j++) {
                    if (items[i].get_text() === nozItems[j]) {
                        alert(items[i].get_text() + " cannot be transferred");
                        // Do some logic to cancel transfer
                        args.set_cancel(true);      // cancel transfer
                    }
                }
            }
        }
    </script>
    <div>
        <div id="noZone">
            England,USA,China
        </div>
        <br />
        <telerik:RadListBox ID="RadListBox1" runat="server" AllowTransfer="True" TransferToID="RadListBox2" AllowReorder="True" SelectionMode="Multiple"
            OnClientTransferring="OnClientTransferring">
            <HeaderTemplate>
                Available Fields
            </HeaderTemplate>
            <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 ID="RadListBox2" runat="server">
            <HeaderTemplate>
                Zone Fields
            </HeaderTemplate>
        </telerik:RadListBox>
    </div>

    I hope this helps, please let me know if you have any additional questions. Thank you for using the UI for ASP.NET AJAX Forums.

    Regards,


    Eric R | Senior Technical Support Engineer
    Progress Telerik

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Back to Top