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

Radnotification Interval problem..

2 Answers 380 Views

Notification

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

shunman asked on 14 Sep 2011, 02:52 PM

hello
i'm trying to change showinterval and autoclosedelay interval from clide-side
i'm found method set_autoCloseDelay() and set_showInterval()

setting value exists in textbox control and i wish to change the interval value from textbox's values.

here is my code. i just added timer for watching count . but it was not work well when i changed textbox value and clicked the button

please look at the my code, and help me. thank you.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadControlsWebApp4._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="./Styles/TempTemplate.css" rel="Stylesheet" type="text/css" />

<script type="text/javascript" language="javascript" src="./Scripts/RadNotification.js"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

</div>

<script type="text/javascript">

var firstNotificationShowTime = 0;

var firstNotificationHideTime = 0;

var timerFirstShow;

var timerFirstHide;

$(document).ready(function () {

var firstNotification = $find("<%=RadNotificationFirst.ClientID %>");

$("#TextBoxFirstNotificationShowInterval").val(firstNotification.get_showInterval());

$("#TextBoxFirstNotificationHideInterval").val(firstNotification.get_autoCloseDelay());

});

function ChangeNotificationTimer() {

var firstNotification = $find("<%=RadNotificationFirst.ClientID %>");

var firstNotificationShowInterval = $("#TextBoxFirstNotificationShowInterval").val();

var firstNotificationHideInterval = $("#TextBoxFirstNotificationHideInterval").val();

firstNotification.set_autoCloseDelay(parseInt(firstNotificationHideInterval));

firstNotification.set_showInterval(firstNotificationShowInterval);

return false;

}

function CountTimerHide() {

firstNotificationHideTime -= 1000;

$("#tdOutputFirst").html("hiding after" + parseInt(firstNotificationHideTime / 1000) + " Second");

}

function CountTimerShow() {

firstNotificationShowTime -= 1000;

$("#tdOutputFirst").html("showing after" + parseInt(firstNotificationShowTime / 1000) + " Second");

}

function OnClientShowing(sender, args) {

clearInterval(timerFirstShow);

$("#print").html($("#print").html() +" "+sender.get_id()+ "showing call<br>");

firstNotificationHideTime = sender.get_autoCloseDelay();

timerFirstHide = setInterval("CountTimerHide()", 1000);

}

function OnClientHiding(sender, args) {

clearInterval(timerFirstHide);

$("#print").html($("#print").html() + " " + sender.get_id() + "Hiding call<br>");

firstNotificationShowTime = sender.get_showInterval();

timerFirstShow = setInterval("CountTimerShow()", 1000);

}

</script>

<div>

<table cellpadding="0" cellspacing="0" style="">

<tr>

<td class="tdLeftContent">First Notification Show Interval</td>

<td class="tdRightContent">

<asp:TextBox ID="TextBoxFirstNotificationShowInterval" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td class="tdLeftContent">First Notification Hide Interval</td>

<td class="tdRightContent">

<asp:TextBox ID="TextBoxFirstNotificationHideInterval" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td style="text-align:center;" colspan="2">

<asp:Button ID="Button1" runat="server" Text="Change" OnClientClick="return ChangeNotificationTimer();"/>

</td>

</tr>

<tr>

<td id="tdOutputFirst" style="text-align:center;" colspan="2">

</td>

</tr>

</table>

</div>

<div id="print">

</div>

<telerik:RadNotification ID="RadNotificationFirst" runat="server" Position="Center" ShowInterval="7000" AutoCloseDelay="6000"

Width="300" Height="200" Title="First Notification" OffsetX="-180" OffsetY="-65" OnClientShowing="OnClientShowing" OnClientHiding="OnClientHiding"

TitleIcon="" EnableRoundedCorners="true">

</telerik:RadNotification>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 15 Sep 2011, 11:08 AM

Notification-Change-Intervals.zip

Hello Shunman,

I tested this functionality and it is working as expected. I use a simpler timer - I reset it every time the notification is hidden/shown so that you can easily see the number of seconds that pass between the events: http://screencast.com/t/r0unG7noiU. After watching the video I see that sometimes the final change of the timer label is not visible there, but you can feel the time elapsed is a second before the event and the counter is reset.

As for the ShowInterval and AutoCloseDelay values - this is the expected behavior. Here is what happens when the AutoCloseDelay is larger than the ShowInterval:
1. The showInterval times out and the notification is shown
2. at this point the autoCloseDelay timer starts ticking and the ShowInterval restarts as well
3. the ShowInterval times out before the autoCloseDelay and the notification's show() method is invoked, which resets the autoCloseDelay timer and thus the notification stays open infinitely (i.e. we go to point 2.)

Another thing you should take into account when calculating these timeouts is animations - if you use animations they also have durations, which you should add to the autoclosedelay and make sure that the total amount is still smaller than the showinterval. Also bear in mind that the KeepOnMouseOver property defaults to true, so if you hover the mouse over the notification the timer is suspended as well, which may result in a difference with your initial calculations. If you wish to make sure that you intervals are kept strictly set this property to false.

On a side note - I see that you are using the document.ready event in jQuery to get a reference to the control objects. This approach is prone to causing issues, as this event is too early in the page lifecycle, you should use Sys.Application.Load or it shortcut - the pageLoad() JavaScript function.

Kind regards,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal