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

5 posts, 1 answers
  1. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 30 Sep 2010 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Sep 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 30 Sep 2010 Link to this post

    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
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Oct 2010 Link to this post

    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.
  6. Herman Gouw
    Herman Gouw avatar
    100 posts
    Member since:
    Aug 2012

    Posted 04 Oct 2010 Link to this post

    Thanks Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017