Show Confirm dialog on radtoolbar button click

4 posts, 1 answers
  1. Ivy
    Ivy avatar
    30 posts
    Member since:
    Feb 2013

    Posted 04 Mar 2013 Link to this post

    Hi,

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

    Thank you,
    Ivy.
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Mar 2013 Link to this post

    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.
  3. Danny
    Danny avatar
    25 posts
    Member since:
    Jan 2009

    Posted 09 Jul 2018 in reply to Princy Link to this post

    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>

     

     

     

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    654 posts

    Posted 10 Jul 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top