radalert custom icon

12 posts, 0 answers
  1. iomega 55
    iomega 55 avatar
    64 posts
    Member since:
    Dec 2004

    Posted 17 Aug 2009 Link to this post

    Hi:

    Can somebody share a way for having a radalert customized? I want to have a different icon for each case I use radalert, something like the vb 6.0 alert window.

    The current radalert only has an "alert icon", but it doesnt have the option for parametrize the image icon for: information, all ok, warning, etc, etc

    Thanks in advance.
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 17 Aug 2009 Link to this post

    I looked around a bit and found the following links:
    http://www.telerik.com/community/forums/aspnet-ajax/window/remove-radalert-icon.aspx
    http://www.telerik.com/help/aspnet-ajax/appearance-css-classes-usage.html http://www.telerik.com/community/forums/aspnet-ajax/window/changing-radalert-icon.aspx
    Basically it seems like you'll have to go in and change around some CSS in order to get this to work. In the first link someone has removed the icon - perhaps this can be used to define an icon as well?


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. iomega 55
    iomega 55 avatar
    64 posts
    Member since:
    Dec 2004

    Posted 17 Aug 2009 Link to this post

    Thanks for reply.

    Do you have a working sample with a change for the radalert icon?

    I raise the radalert window on the client side.

    The solutions you share show how to remove the icon, but not how(explicit) change the icon.

    Thanks again.
  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 18 Aug 2009 Link to this post

    Hi iomega 55,

    Here is how to change the radalert icon with CSS:
    div.rwDialogPopup 
    {  
        background-image:url(Skins/Black/Common/loading.gif)  !important;  
    }  



    Greetings,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. iomega 55
    iomega 55 avatar
    64 posts
    Member since:
    Dec 2004

    Posted 18 Aug 2009 Link to this post

    Thank you for help us.

    One more request.

    How can I do this clientside?

    function fnShowRadAlert(typeIcon)
    {
        switch (typeIcon)
        {
            case 0:
                       radalert   ->  with alert icon
                       break;
            case 1:
                       radalert   ->  with warning icon
                       break;
            case 2:
                       radalert   ->  with ok icon
                       break;
    }

    I mean, How can I change CSS dynamically?
  7. DK
    DK avatar
    72 posts
    Member since:
    Jun 2009

    Posted 26 Aug 2009 Link to this post

    popupElementpopupElement.className = popupElement.className + " icon2"; 

    i am not getting this line?
    if i write popupElement.className =  " icon2"; 
    then the  whole popup gets destroyed the image i am using gets all over the popup and ok button is seen only as link button and go to the left side of  the window?
  8. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 26 Aug 2009 Link to this post

    EDIT:
    Hello DK

    The correct line is:
    popupElement.className = popupElement.className + " icon2";
    There was a duplicated string in the code - I fixed it to avoid further problems.

    /END EDIT


    Hi iomega 55,

    Yes, this is possible. Here is a small sample that shows the basic approach - you can extend it further to fit your requirements.

    <head runat="server"
        <title></title
        <style type="text/css"
            .icon1 div.rwDialogPopup 
            { 
                background-image: url(Skins/Black/Common/loading.gif) !important; 
            } 
            .icon2 div.rwDialogPopup 
            { 
                background-image: url(Skins/Hay/Common/loading.gif) !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 callAlert() 
            { 
                var oWnd = radalert('main text to display', 340, 110, 'new title'); 
                var popupElement = oWnd.get_popupElement(); 
                popupElement.className = popupElement.className + " icon2"; 
            } 
        </script> 
     
        <button onclick="callAlert(); return false;"
            show radalert</button> 
        </form> 


    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. DK
    DK avatar
    72 posts
    Member since:
    Jun 2009

    Posted 26 Aug 2009 Link to this post

    but still i mgetting the default image of the alert  and not which i want to display ?
    please help me in this regard

    i have the following function
    <style type"text/css">
    .icon Div .rwDialogPopup
    {
    background-image:url(Images/error.jpg) !important;
    }
    </style>
    var divStart="<Div class='ABC'>";
    var divEnd="</Div>";

    function TOAAlert(msg)
    {
    var oWnd = radalert(divStart+msg+divEnd,100,100,"TOA_Alert");
    var popupElement=oWnd.get_popupElement();
    popupElement.className=popupElement.className+"icon";
  10. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 26 Aug 2009 Link to this post

    You have a few little mistakes like a missing "=" etc., but just copy + paste this code.

    Head section:
        <style type="text/css" > 
            .icon div.rwDialogPopup  
            {  
                background-image: url(Images/error.jpg) !important;  
            }  
        </style> 

    And then this in the body:
        <script type="text/javascript"
            var divStart = "<Div class='ABC'>"
            var divEnd = "</Div>"
            function TOAAlert(msg)  
            {  
                var oWnd = radalert(divStart + msg + divEnd, 100, 100, 'TOA_Alert');  
                var popupElement = oWnd.get_popupElement();  
                popupElement.className = popupElement.className + " icon"
            } 
        </script>  

    Tested and it worked fine for me.
  11. DK
    DK avatar
    72 posts
    Member since:
    Jun 2009

    Posted 27 Aug 2009 Link to this post

    thanks Schlurk
    Now its working fine for me.
    thanks a lot.
  12. Usman Khalid
    Usman Khalid avatar
    6 posts
    Member since:
    Jan 2010

    Posted 25 Jan 2010 Link to this post

    Hello Everybody,
    I want to ask if someone can provide me some help for setting my customized icon for File Explorer's folders and contents.

    Regards
    Usman Khaid
  13. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 25 Jan 2010 Link to this post

    There is a forum post by a Telerik team member, found here, which you can look into for having your own custom icons. Essentially you  have a sprite sheet which you would have to modify (or replace) in order to get your own custom icons up and running.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017