Show Confirm dialog on radtoolbar button click

[Ivy]

Hi,

I want to open a confirm dialog on clicking a particular RadToolBar Button. Is this possible? Please help.

Thank you,
Ivy.

[Princy]

Hello,

Please have a look at the following code I tried to display a confirm dialog when a RadToolBar Button is clicked.

ASPX:

<telerik:RadToolBar ID="RadToolBar" runat="server" OnClientButtonClicking="onClientButtonClicking"
    OnButtonClick="RadToolBar_ButtonClick">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="File">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Exit">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

JavaScript:

<script type="text/javascript">
    function onClientButtonClicking(sender, args) {
        var radToolBar = $find("<%=RadToolBar.ClientID %>");
        var button = radToolBar.findItemByText("Exit");
        var ok = confirm("Are you sure you want to Exit?");
        if (ok)
            return true;
        else
            return args.set_cancel(true);
    }
</script>

Thanks,
Princy.

[Danny]

Hello

 

I am having an issue with this. I only want to show the message on certain buttons that are clicked. E.g. are you sure you want to delete if the delete button is pressed. This example shows for every button that is clicked. 

 

<script type="text/javascript">
    function onClientButtonClicking(sender, args) {
        var radToolBar = $find("<%=RadToolBar1.ClientID %>");
        var button = radToolBar.findItemByValue("Delete");
        var ok = confirm("Are you sure you want to delete?");
        if (ok)
            return true;
        else
            return args.set_cancel(true);
    }
</script>

        <telerik:RadToolBar ID="RadToolBar1"  runat="server"
            OnButtonClick="RadToolBar1_ButtonClick" OnClientButtonClicking="onClientButtonClicking"  Width="100%" Height="100%" EnableEmbeddedSkins="true" Skin="Bootstrap">
            <Items>
                <telerik:RadToolBarButton Text="Return to Storage Policies" Value="return" ImageUrl="images/returntoolbar.png"></telerik:RadToolBarButton>
                   <telerik:RadToolBarButton Text="Save" ImageUrl="images/savetoolbar.png" Value="save"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>
                   
                    <telerik:RadToolBarButton Text="Delete" Value="delete" ImageUrl="images/deletetoolbar.png" ></telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>

 

 

 

[Peter Milchev]

Hello Danny, 

The OnClientButtonClicking event handler has the clicked button in its arguments. That means you can show this dialog only if the value of the clicked item is "delete":

<script>
    function OnClientButtonClicking(sender, args) {
        var radToolBar = sender;
        var clickedButton = args.get_item();
        if (clickedButton.get_value() == "delete") {
            var ok = confirm("Are you sure you want to delete?");
            if (!ok) {
                args.set_cancel(true);
            }
        }

    }
</script>

Regards,
Peter Milchev
Progress Telerik