This is a migrated thread and some comments may be shown as answers.

Alert, Info, Warning windows - RadAlert function

12 Answers 256 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 09 Nov 2009, 10:03 PM
Hi, everybody

Im still new to Telerik Controls, so sorry for dumb questions.

Anyway is there some Css hack or another way to set icon in simple radalert javascript function? I would like to have several types of messages in my project. And exclamation mark is not appropriat, when opertaion finish successfully.

Thanks!

12 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 10 Nov 2009, 07:23 AM
Hello Jan,

Try adding following CSS in order to change the radalert icon.

CSS:
 
    <style type="text/css"
        .RadWindow .rwWindowContent .radalert 
        { 
            background-imageurl(../../Images/AddRecord.gif) !important; 
        } 
    </style> 

Regards,
Shinu.
0
Georgi Tunev
Telerik team
answered on 10 Nov 2009, 09:24 AM
Hi Jan,

if you want to change the exclamation sign in the alert box rather than the icon of the window you may use the following CSS:

.rwDialogPopup.radalert
{
 background: url('CutomExclamation.gif') no-repeat left center !important;
}




Sincerely yours,
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.
0
Jan
Top achievements
Rank 1
answered on 10 Nov 2009, 03:24 PM
Hi,

thanks for reply, could i change it with JavaScript, or show rad alert with special css class? Because when i set the css class its for whole app and is bit complicated to render css rules dynamically in header every time i want to show custom header.

something like

radalert('Everything is ok''information');  






and css:

.information .rwDialogPopup.radalert 
 backgroundurl('/images/popup-information.gif'no-repeat left center !important; 

0
Accepted
Georgi Tunev
Telerik team
answered on 11 Nov 2009, 03:03 PM
Hello Jan,

Yes, this is possible:
<title></title>
<style>
    .newStyle
    {
        background: url('CutomExclamation.gif') no-repeat left center !important;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
 
<script type="text/javascript">
 
    function showModifiedAlert()
    {
        var oWnd = radalert("message");
        var content = oWnd.get_contentElement().getElementsByTagName("DIV");
        for (var i in content)
        {
            if (content[i].className == "rwDialogPopup radalert")
            {
                content[i].className += " newStyle";
            }
        }
    }
 
</script>
 
<button onclick="showModifiedAlert(); return false;">
    test</button>
</form>


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.
0
sravanthi
Top achievements
Rank 1
answered on 27 Aug 2010, 06:52 PM

I need to change the radalert image .But I am calling the radalert in code behind.I am not able to change the Image.

I had written it like this:(It doesnot work like this)

C#:

 

string

 

 

 

radalertscript = "<script language='javascript'>function f(){var ownd=radalert('<b> Record has been saved </b>', 150, 150); var content = oWnd.get_contentElement().getElementsByTagName('DIV');for(var i in Content){if (content[i].className == 'rwDialogPopup radalert'){content[i].className += ' newStyle';}Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>";

 

Page.ClientScript.RegisterStartupScript(

 

 

this.GetType(), "radalert", radalertscript);

.aspx

 

 

<

 

 

style type="text/css">

 

 

 

 

.newStyle

 

 

{

 

 

background: url('/App_Themes/Default/Images/army_seal2.gif') no-repeat left center !important;

 

}

 

</

 

 

style>

 

 

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="server">

 

 

 

 

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

 

 

 

 

</telerik:RadWindowManager>

 

 

</asp:Content>

When i did it like this it works(but here the default image occurs)
C#:
protected void Button1_Click(object sender, EventArgs e) 
    string radalertscript = "<script language='javascript'>function f(){radalert('Welcome to RadWindow <b>Prometheus</b>!', 330, 210); Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>"
    Page.ClientScript.RegisterStartupScript(this.GetType(), "radalert", radalertscript); 


Can Any one help me with this.

Thanks,
Sravanthi.
0
Erik
Top achievements
Rank 1
answered on 16 Jan 2012, 05:53 PM
Would it be possible to get a working example of this?
0
Marin Bratanov
Telerik team
answered on 17 Jan 2012, 03:20 PM
Hello Erik,

I am attaching a simple example that uses an even simpler approach to change the RadAlert icon - it adds a custom CSS class to the needed RadAlert so that your stylesheet can cascade through it and override the default icon: http://screencast.com/t/PUCd0Vc7bRq. I hope this helps you incorporate this functionality in your project. If you need to call it from the code-behind what I can suggest is that you inject the call to this JavaScript function from the code-behind as explained here.


Regards,
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
0
Erik
Top achievements
Rank 1
answered on 17 Jan 2012, 03:31 PM
thank you very much, Marin! This way works great!

Would i change it the same way if i wanted to remove the top window icon that appears on the close bar of the alert? Since it is Green, it doesn´t really go with my design, so I´d like to remove it altogether.

How would the CSS look like?
0
Princy
Top achievements
Rank 1
answered on 18 Jan 2012, 07:07 AM
Hello,

Try the following CSS.
CSS:
<style type="text/css">
 .rwIcon
  {
    display:none !important;
  }
</style>

Thanks,
Princy.
0
Naren
Top achievements
Rank 1
answered on 07 Dec 2012, 04:02 PM
HI Telrik team,
 can u please post the sample code for changing the icon thru codebehind.

string

 

 

ImageUrl = "~/Images/Hours.png";

 


 

 

string radalertscript = "<script language='javascript'>function f(){radalert('" + displaymessage + "', 330, 210,'CUSTOM ALERT',,'" + ImageUrl + '"); Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>";

 

Page.ClientScript.RegisterStartupScript(

 

this.GetType(), "radalert", radalertscript);

 

0
Marin Bratanov
Telerik team
answered on 10 Dec 2012, 12:16 PM
Hello Naren,

Since Q1 2012 this functionality is built in the dialogs, so you can simply pass the URL to your image as the last argument in the radalert() function. This goes for both the client-side and server-side methods. More information on the arguments the function takes and how to modify the images is available in the following resources:
http://www.telerik.com/help/aspnet-ajax/window-dialogs-alert.html
http://demos.telerik.com/aspnet-ajax/window/examples/browserdialogboxes/defaultcs.aspx


All the best,
Marin Bratanov
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.
0
Naren
Top achievements
Rank 1
answered on 10 Dec 2012, 12:29 PM
HI Telrik team ,

thx  i am able to resolve the isssue.

Regards!
--Naren
Tags
Window
Asked by
Jan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Georgi Tunev
Telerik team
Jan
Top achievements
Rank 1
sravanthi
Top achievements
Rank 1
Erik
Top achievements
Rank 1
Marin Bratanov
Telerik team
Princy
Top achievements
Rank 1
Naren
Top achievements
Rank 1
Share this question
or