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

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

4 Answers 164 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Herman Gouw
Top achievements
Rank 2
Herman Gouw asked on 30 Sep 2010, 07:05 AM
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

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 30 Sep 2010, 07:43 AM
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.
0
Herman Gouw
Top achievements
Rank 2
answered on 30 Sep 2010, 08:20 AM
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
0
Accepted
Shinu
Top achievements
Rank 2
answered on 01 Oct 2010, 07:52 AM
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.
0
Herman Gouw
Top achievements
Rank 2
answered on 04 Oct 2010, 02:05 PM
Thanks Shinu.
Tags
ListBox
Asked by
Herman Gouw
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Herman Gouw
Top achievements
Rank 2
Share this question
or