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

[Joby]

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

[Princy]

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.

[Joby]

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

[Richard]

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!

[Richard]

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!

[Joby]

Thank for the reply.....Actually i need to set background image for YES/NO button

[Marin Bratanov]

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

[Joby]

Hi Martin,
Thank you for your reply.....

[SR]

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

[Princy]

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.

[Naree]

can u suggest me how to apply styles for OK and Cancel buttons.  Thanks in Advance.

[Princy]

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.

[Naree]

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.

[rdmptn]

I think this will help: http://www.telerik.com/support/kb/aspnet-ajax/window/details/centering-the-buttons-of-the-predefined-dialogs-and-keeping-the-image-aligned-to-the-top.
Also, you can always change the template to fit your needs: http://www.telerik.com/help/aspnet-ajax/window-dialogs-changing-dialog-templates.html.