How to display a confirmation box when the user clicks the transfer buttons

[Herman Gouw]

Hi,

On one of the web pages in my current project, there are 2 RadListBoxes (RadListBox1 on the left and RadListBox2 on the right).

When the user clicks the buttons to transfer a single/multiple/all items from RadListBox2 to RadListBox1, I want to display a confirmation box displaying the message "Are you sure you want to continue?" and 2 buttons (OK/Yes and Cancel/No).

If the user clicks OK/Yes, then the transfer will be done. Otherwise if the user clicks Cancel/No, the transfer will be cancelled.

The screen shot of the web page is given on http://img31.imageshack.us/img31/9424/listboxes.jpg

I have checked the Telerik samples and forums but could not find anything.

Can I display this confirmation by adding a JavaScript confirm function to the buttons' onclick event handler?

If this is the correct solution, can you show me how to add a JavaScript confirm function to these buttons' onclick event handler?

Otherwise, can you please show me the correct way to display the confirmation box?

Regards,
Herman

[Shinu]

Hi Herman,

Attach OnClientTransferring client-side event which occurs when the selected item is about to be transferred to the destination RadListBox. Now in the event handler, show confirm and cancel the event based on user selection.


Check this: http://www.telerik.com/help/aspnet-ajax/listbox-onclienttransferring.html


-Shinu.

[Herman Gouw]

Hi Shinu,

Thank you for your quick reply.

I only want to display the confirmation when the user transfers the items from RadListBox2 to RadListBox1 (and NOT from RadListBox1 to RadListBox2).

How can I check in the JavaScript function that the source RadListBox is RadListBox2  (or the destination RadListBox is RadListBox1)?

Best regards,
Herman

[Shinu]

Hello Herman,


Have a look at the following code which emulates similar functionality.

aspx:

<telerik:RadListBox OnClientTransferring="OnClientTransferring" Skin="Outlook" ID="RadListBox1"
    runat="server" AllowTransfer="true" TransferToID="RadListBox2">
    <ButtonSettings TransferButtons="All"></ButtonSettings>
    <Items>
        <telerik:RadListBoxItem runat="server" Text="China" />
        <telerik:RadListBoxItem runat="server" Text="London" />
    </Items>
</telerik:RadListBox>
<telerik:RadListBox Skin="Outlook" ID="RadListBox2" runat="server">
    <ButtonSettings TransferButtons="All"></ButtonSettings>
    <Items>
        <telerik:RadListBoxItem runat="server" Text="Paris" />
        <telerik:RadListBoxItem runat="server" Text="Indonasia" />
    </Items>
</telerik:RadListBox>

client code:

<script type="text/javascript">
    function OnClientTransferring(sender, args) {
        if (args.get_sourceListBox().get_id() == "RadListBox2") {
            args.set_cancel(!confirm('Are you sure...?'));
        }
    }
</script>

-Shinu.

[Herman Gouw]

Thanks Shinu.