Cancel Selection and return Selected Items to Source

[Brad]

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);
            }

[Eric R | Senior Technical Support Engineer]

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