"OK" button to close notification

6 posts, 0 answers
  1. Nicola Farina
    Nicola Farina avatar
    8 posts
    Member since:
    Mar 2012

    Posted 26 Jun 2012 Link to this post

    Hi all,

    I need, if possibile, an example of how to add an "OK" button inside a notification to close it (instead of using the X on the top right corner).

    I'm playing around with it, but it doesn't work.

    Thank you.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Jun 2012 Link to this post


    Try the following code to achieve your scenario. 

    <telerik:RadNotification ID="RadNotification1" runat="server" Title="Sample Title" Text="Simple text content" VisibleOnPageLoad="true" AutoCloseDelay="0" ShowCloseButton="false" >
                <telerik:RadButton ID="btnOk" runat="server" AutoPostBack="false" Text="OK" OnClientClicked="OnClientClicked" ></telerik:RadButton>

    <script type="text/javascript" >
        function OnClientClicked(sender, args)
             var notification = $find("<%=RadNotification1.ClientID %>");

    Hope this helps.

  3. Najid Hanif
    Najid Hanif avatar
    92 posts
    Member since:
    Jul 2011

    Posted 06 Nov 2012 Link to this post

    Hi this works for me but is there a way to do this without the javascript? I want the button in the notification to not post back and just close the notification. Just setting  AutoPostBack="false" on the button does not help


  4. Marin Bratanov
    Marin Bratanov avatar
    4441 posts

    Posted 07 Nov 2012 Link to this post


    If you do not want the button to postback you need to write some JavaScript to execute the desired logic. If neither a JavaScript function is called, nor a postback is initiated there isn't a way for a button to provide any interaction.

    The correct way to close the notification would be through its hide() method, too.

    Also, the control offers a [x] button in its titlbar that can be used to close it. It can be enabled through the ShowCloseButton property.

    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.
  5. Diego
    Diego avatar
    6 posts
    Member since:
    Nov 2014

    Posted 15 Jan 2015 in reply to Shinu Link to this post


    When I tried the coded provided, after adding the <ContentTemplate> I am loosing all the Text set on the RadNotification.
    Here is my code:

    <telerik:RadNotification ID="ErrorMessage" runat="server" Text="User groups are limited to 500 users." Position="Center" AutoCloseDelay="0" Width="200" Title="Error" ContentIcon="/MedManager/images/Dialogs/error_sm.png">
    <telerik:RadButton ID="btnOk" runat="server" AutoPostBack="false" Text="OK" OnClientClicked="OnClientClicked"></telerik:RadButton>

    function OnClientClicked(sender, args) {

    var notification = $find("<%=ErrorMessage.ClientID %>");



    Thank you
  6. Marin Bratanov
    Marin Bratanov avatar
    4441 posts

    Posted 16 Jan 2015 Link to this post

    Hello Diego,

    I have answered your support ticket on the matter and I am pasting my response here for anyone else having the same question:


    This behavior is expected. The built-in text and content icon are available in the simplest scenario. If the developer wants to have a custom layout in the control, the ContentTemplate provides freedom do to that without built-in styles. You can see that here: http://demos.telerik.com/aspnet-ajax/notification/examples/settingcontent/defaultcs.aspx .

    What I can suggest are the following approaches:

    • use the built-in close button on the titlebar of the notification, if possible. It is visible by default and will not require the use of a ContentTemplate.
    • OR, add a literal or label where you can set the desired text. It seems you have your custom icon for the ContentIcon so you can use a simple image element for it. Anyway, If you want to have an icon from the built-in ones, you have two options:  

    On a side note - the recommended way to close the notification is by calling its hide() method and not the "private" _close() method: http://www.telerik.com/help/aspnet-ajax/notification-client-side.html

    Regards, Marin Bratanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top