Change Icon of RadConfirm

[Brett]

How do I change the icon in the top left of the title bar in my radconfirm window?
I am using RadWindowsManager and I can set the icon that way, but then the same icon appeas for RadAlert, RadConfirm, etc.

I want to specify the icon for only the RadConfirm window.  Please advise.

Thanks
Brett

[Georgi Tunev]

Hello Brett,

I believe that the following forum thread will be of help:
http://www.telerik.com/community/forums/aspnet-ajax/window/radconfirm-src-icon-change.aspx


Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brett]

Hi Georgi,
Your solution only changes the icon within the body of the radwindow.  I am trying to change the icon in the titlebar.  Currently this icon can be controlled if I change the "IconUrl"  in the RadWindowManager properties, however I would like to control the icon individually for the built-in RadWindow Dialogs

I would like to use different icons for radalert and radconfirm, but can't figure out how to set them individually.  I have included a screenshot to show what icon I mean.

Thanks,
Brett

[Georgi Tunev]

Hello Brett,

In this case, you can try the approach described in this forum post - just replace radopen with radconfirm()

http://www.telerik.com/community/forums/aspnet-ajax/window/set-iconurl-client-side-not-setting-the-icon-on-a-new-window.aspx


Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brett]

HI Georgi,
 I tried the approach you suggested in the article and seems it would work well in most cases, however I am trying to catch the delete event from a button in a radgrid.  That being the case, how can I modify my function to include the the icon code.  I will past in my JS script for you review and if you could recommend where to add the appropiate changes, that would be great.

<script type="text/javascript">
        var oldConfirm = radconfirm;

        window.radconfirm = function(text, mozEvent) {
            var ev = mozEvent ? mozEvent : window.event; //Moz support requires passing the event argument manually
            //Cancel the event
            ev.cancelBubble = true;
            ev.returnValue = false;
            if (ev.stopPropagation) ev.stopPropagation();
            if (ev.preventDefault) ev.preventDefault();

            //Determine who is the caller
            var callerObj = ev.srcElement ? ev.srcElement : ev.target;

            //Call the original radconfirm and pass it all necessary parameters
            if (callerObj) {
                //Show the confirm, then when it is closing, if returned value was true, automatically call the caller's click method again.
                var callBackFn = function(arg) {
                    if (arg) {
                        callerObj["onclick"] = "";
                        if (callerObj.click) callerObj.click(); //Works fine every time in IE, but does not work for links in Moz
                        else if (callerObj.tagName == "A") //We assume it is a link button!
                        {
                            try {
                                eval(callerObj.href)
                            }
                            catch (e) { }
                        }
                    }
                }
                oldConfirm('Are you sure you want to delete this job from your application?', callBackFn, 300, 100, null, 'Delete Confirmation');

            }
            return false;
        }

    </script>

Thanks in advance.
Brett

[Georgi Tunev]

Hello Brett,

You should execute the code when calling the original radconfirm.
e.g.

var oldConfirm = radconfirm;

window.radconfirm = function(text, mozEvent)
{
    var ev = mozEvent ? mozEvent : window.event; //Moz support requires passing the event argument manually
    //Cancel the event
    ev.cancelBubble = true;
    ev.returnValue = false;
    if (ev.stopPropagation) ev.stopPropagation();
    if (ev.preventDefault) ev.preventDefault();

    //Determine who is the caller
    var callerObj = ev.srcElement ? ev.srcElement : ev.target;

    //Call the original radconfirm and pass it all necessary parameters
    if (callerObj)
    {
        //Show the confirm, then when it is closing, if returned value was true, automatically call the caller's click method again.
        var callBackFn = function(arg)
        {
            if (arg)
            {
                callerObj["onclick"] = "";
                if (callerObj.click) callerObj.click(); //Works fine every time in IE, but does not work for links in Moz
                else if (callerObj.tagName == "A") //We assume it is a link button!
                {
                    try
                    {
                        eval(callerObj.href)
                    }
                    catch (e) { }
                }
            }
        }
        var oWnd = oldConfirm('Are you sure you want to delete this job from your application?', callBackFn, 300, 100, null, 'Delete Confirmation');
        oWnd.set_iconUrl("http://www.mass.gov/massgov2/images/rss/feed-icon.jpg");
        oWnd._titleIconElement.style.background = "transparent url('http://www.mass.gov/massgov2/images/rss/feed-icon.jpg') no-repeat scroll 0px 0px";

    }
    return false;
}

Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tejas Shah]

Well, let me correct.. I am not trying to change icon in Window header (where minimize, maximize etc buttons are present)

I want to replace "Blue Questionmark" image on window with custom image based on Confirmation I am suppose to show.

If I use following, it replaces questionmark image with image specified.

<style type="text/css">
        .RadWindow .rwWindowContent .radconfirm
        {
            background-image: url('../../images/stop.gif');
            background-position: left top;
        }
    </style>

Is there any way around it?

[Martin]

Hello Tejas Shah,

The CSS approach you have tried is the only possible and correct way to change the image of the confirm dialog. However, please consider that you may need to force your custom values in certain cases, i.e:

<style type="text/css">
 .RadWindow .rwWindowContent .radconfirm
 {
  background-image: url('../../images/stop.gif') !important;
  background-position: left top !important;
 }
</style>

Please, let me know if you experience further problems.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.