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

Cancel Selection and return Selected Items to Source

1 Answer 49 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 13 Feb 2020, 02:36 PM

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

1 Answer, 1 is accepted

Sort by
0
Eric R | Senior Technical Support Engineer
Telerik team
answered on 17 Feb 2020, 09:58 PM

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.
Tags
ListBox
Asked by
Brad
Top achievements
Rank 1
Answers by
Eric R | Senior Technical Support Engineer
Telerik team
Share this question
or