How to change RadAlert,Rad Confirm (OK,CANCEL) button css and text

14 posts, 0 answers
  1. Joby
    Joby avatar
    25 posts
    Member since:
    Nov 2010

    Posted 05 Jan 2012 Link to this post

    Hi,
    How to change RadAlert,Rad Confirm (OK,CANCEL) button style as well as its text.I have aligned the control center.But i need to put back ground image.Also i need to change its text to (YES OR NO) instead of (OK OR CANCEL)

    Thank You,
    Joby
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Jan 2012 Link to this post

    Hello,

    Try the following to change the OK and Cancel button text.
    JS:
    <script type="text/javascript">
    Telerik.Web.UI.RadWindowUtils.Localization =   
    {  
        "OK" : "Yes",  
        "Cancel" : "No"
    };
    </script>

    Try the following CSS to add background image.
    CSS:
    .rwInnerSpan
     {
       background: url('../Images/image1.gif') !important
     }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joby
    Joby avatar
    25 posts
    Member since:
    Nov 2010

    Posted 05 Jan 2012 Link to this post

    Hi Princy,
    Thank you for your reply.YES/NO working perfectly but still i can't set back ground image.One more problem is that i want "OK" button for RadAlert and YES/NO for RadConfirm
  5. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 05 Jan 2012 Link to this post

    Joby:

    You can modify the imbedded icon for the RadAlert and the RadConfirm Modal Dialogs using the following CSS:
    <style type="text/css">
        .radalert
        {
            background-image: url("/images/lemon-icon.png") !important;
        }
        .radconfirm
        {
            background-image: url("/images/lime-icon.png") !important;
        }
    </style>

    I'm working on a solution to retain the "OK" button text for the RadAlert while allowing you to change the default "OK", "Cancel" to "Yes", "No" only on the RadConfirm popup. I'll update you by tomorrow.

    See the attached images for the resulting displays and Firebug info.

    Cheers!
  6. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 05 Jan 2012 Link to this post

    Joby:

    You can change the button text for the RadConfirm by adding and modifying a "Confirm Template" to your RadWindowManager as per the Changing the Dialog Templates documentation page. I did this, as follows:

    Default.aspx:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        <ConfirmTemplate>
            <div class="rwDialogPopup radconfirm">
                <div class="rwDialogText">
                    {1}
                </div>
                <div>
                    <a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);">
                        <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[Yes]##</span></span></a>
                    <a onclick="$find('{0}').close(false);" class="rwPopupButton" href="javascript:void(0);">
                        <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[No]##</span></span></a>
                </div>
            </div>
        </ConfirmTemplate>
    </telerik:RadWindowManager>
     
    See the resulting RadConfirm popup in the attached image.

    You can only choose from the button text options predefined in the localization file used by your application. But, you have the option to create and apply your own localization file as described in the RadWindow's Localization page.
    Hope this is sufficient!
  7. Joby
    Joby avatar
    25 posts
    Member since:
    Nov 2010

    Posted 06 Jan 2012 Link to this post

    Thank for the reply.....Actually i need to set background image for YES/NO button
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 06 Jan 2012 Link to this post

    Hello, guys,

    For such heavy customizations I advise that you simply modify the Template accordingly. The default buttons are a more complex HTML structure so setting a background for them would be difficult to achieve by simply overriding CSS. You can simply use two anchor elements, set the desired background images and dimensions for them while keeping the onclick event handler that will close the popup. You can still change the background image easily via one single CSS override as explained in a prior post by 
    jumpstart. For example you can start off like this and modify the buttons as you need:

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        <ConfirmTemplate>
            <div class="rwDialogPopup radconfirm">
                <div class="rwDialogText">
                    {1}
                </div>
                <div>
                    <a onclick="$find('{0}').close(true);" style="background-image: url(myYesImage.png); width: 50px; height: 20px; padding-right: 15px;" href="javascript:void(0);">
                       ##LOC[Yes]##</a>
                    <a onclick="$find('{0}').close(false);" style="background-image: url(myNoImage.png); width: 50px; height: 20px;" href="javascript:void(0);">
                        ##LOC[No]##</a>
                </div>
            </div>
        </ConfirmTemplate>
    </telerik:RadWindowManager>

    Alternatively, you can use a regular RadWindow and create your desired layout in its ContentTemplate. This allows you to fully customize the appearance and images. You can easily set the RadWindow properties to resemble a confirm (modality, size, even autosizing, behaviors, etc).

    All the best,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Joby
    Joby avatar
    25 posts
    Member since:
    Nov 2010

    Posted 06 Jan 2012 Link to this post

    Hi Martin,
    Thank you for your reply.....
  10. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 15 Mar 2014 in reply to Princy Link to this post

    Hi Princy 

    I added the above contion i got the error how to resolve that . My need is change the button names [Ok ,Cancel ]to [Yes ,No ].
    Error is JavaScript runtime error: 'Telerik' is undefined


  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Mar 2014 in reply to SR Link to this post

    Hi,

    Please take a look into this help documentation which discuss about the same and also have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    </telerik:RadWindowManager>

    JavaScript:
    Telerik.Web.UI.RadWindowUtils.Localization =  
        "OK" : "Yes"
        "Cancel" : "No",
    };

    C#:
    RadWindowManager1.RadConfirm("This is an example page",null, 500, 200,null,"Demo");

    Thanks,
    Princy.
  12. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 10 Jun 2014 in reply to Princy Link to this post

    can u suggest me how to apply styles for OK and Cancel buttons.  Thanks in Advance.
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2014 in reply to Naree Link to this post

    Hi Garivi,

    Please try to customize the CSS class rwPopupButton, rwOuterSpan,rwInnerSpan to change style of Ok and Cancel button. 

    Let me know if you have any concern.
    Thanks,
    Princy.
  14. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 11 Jun 2014 in reply to Princy Link to this post

    Hi princy, 
    thanks for your suggestion. I applied some of the styles on OK and CANCEL buttons. Can u suggest me how to get the OK and CANCEL buttons in to page centre.

    Thanks In Advance.

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