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

Demo for session timeout is confusing

12 Answers 904 Views

Notification

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

Carl asked on 09 Dec 2014, 07:32 PM

http://demos.telerik.com/aspnet-ajax/notification/examples/sessiontimeout/defaultcs.aspx

The demo at this URL is horribly confusing with unclear references to "UI counters" and a different demo than the "recommended" setup. Please cleanup this demo so it accurately portrays the application scenario!

For my project, I'm trying to implement a session timeout popup without using a postback. I've added RadNotification tag to the aspx page, assigned ShowInterval and Value properties on the RadNotification from code behind, and now I'm stuck trying to get the javascript to work for the countdown and redirect. I want the notification popup to countdown from 60 and then redirect to another page, however I can not figure out the javascript piece from the demo. Am I correct in assuming I only need the UpdateTimeLabel() and ContinueSession() functions? How do i wire these up so they start firing when the notification is displayed? Is the pageLoad() javascript function needed for this scenario (unclear from the demo)?

Here is my tag in aspx:

<telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"

Height="100" OnCallbackUpdate="OnCallbackUpdate" LoadContentOn="PageLoad" AutoCloseDelay="60000"

Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true"

ShowCloseButton="false" KeepOnMouseOver="false">

<ContentTemplate>

<div class="infoIcon">

<img src="images/infoIcon.jpg" alt="info icon" />

</div>

<div class="notificationContent">

Time remaining: <span id="timeLbl">60</span>

<telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"

Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadNotification>

Code behind:

if (!IsPostBack)

{

//set the expire timeout for the session

Session.Timeout = 2;

//configure the notification to automatically show 1 min before session expiration

RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000;

//set the redirect url as a value for an easier and faster extraction in on the client

RadNotification1.Value = Page.ResolveClientUrl("default.aspx");

}

And javascript (using a <script> tag directly under <body> tag):

function UpdateTimeLabel(toReset) {

var sessionExpired = (seconds == 0);

if (sessionExpired) {

//stopTimer("timeLeftCounter");

//redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value

window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();

}

else {

var timeLbl = $get("timeLbl");

timeLbl.innerHTML = seconds--;

}

function ContinueSession() {

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

//we need to contact the server to restart the Session - the fastest way is via callback

//calling update() automatically performs the callback, no need for any additional code or control

notification.update();

notification.hide();

//resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made)

//You need to inject a call to the ContinueSession() function from the code behind in such a request

var showIntervalStorage = notification.get_showInterval(); //store the original value

notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing

notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again

//stopTimer("timeLeftCounter");

//seconds = 60;

//updateMainLabel(true);

}

12 Answers, 1 is accepted

Accepted

answered on 12 Dec 2014, 09:08 AM

Hello,

Here is a simplified version of the code that uses only one timer (having two makes things more complex, as can be expected):

<script type="text/javascript">

var timeLeftCounter = null;

var seconds = 60;

function pageLoad() {

var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel;

xmlPanel.set_enableClientScriptEvaluation(true);

};

function stopTimer(timer) {

clearInterval(this[timer]);

this[timer] = null;

};

function resetTimer(timer, func, interval) {

this.stopTimer(timer);

this[timer] = setInterval(Function.createDelegate(this, func), interval);

};

function OnClientShowing(sender, args) {

resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);

}

function UpdateTimeLabel(toReset) {

var sessionExpired = (seconds == 0);

if (sessionExpired) {

stopTimer("timeLeftCounter");

window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();

} else {

var timeLbl = $get("timeLbl");

timeLbl.innerHTML = seconds--;

}

function ContinueSession() {

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

notification.update();

notification.hide();

var showIntervalStorage = notification.get_showInterval();

notification.set_showInterval(0);

notification.set_showInterval(showIntervalStorage);

stopTimer("timeLeftCounter");

seconds = 60;

}

</script>

<telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"

Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"

LoadContentOn="PageLoad" AutoCloseDelay="60000"

Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true"

ShowCloseButton="false" KeepOnMouseOver="false">

<ContentTemplate>

Time remaining: <span id="timeLbl">60</span>

<telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"

Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">

</telerik:RadButton>

</ContentTemplate>

</telerik:RadNotification>

Essentially, I copied the code from the demo, removed the bits I did not want and found the function that works with the first timer so I can find its usages and remove them.

To elaborate on each of the remaining functions:

the pageLoad handler is needed because of the specifics of the XmlHttpPanel and RadButton controls + the client callbacks.
stopTimer and resetTimer are helper functions
OnClientShowing is the notification handler that fires when it shows up. This is where you start the countdown that will, once expired, redirect to the other page and will, in the meantime, update the remaining seconds in the notification.
UpdateTimeLabel is where the above calculation occurs via a global variable and a timer.
ContinueSession is what is used when the button in the notification is clicked. More details about it are avaialble in the demo's code as comments and in its description.

Regards,

Marin Bratanov
Telerik

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.

answered on 05 Nov 2016, 10:23 AM

Hi Marin,

I had already implemented the java script and aspx same as yours in the master page.How can i Reset the Session Timer while editing the screen.even i had applied the UpdateMode="Always" with the asp:updatedpanel,it haven't got updated.Please find the Code below and tell me if i did anything wrong.Any help will be appreciated.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<ClientEvents OnRequestStart="ContinueSession" OnResponseEnd="ContinueSession" />
</telerik:RadAjaxManager>

<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="650"
Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
LoadContentOn="PageLoad" AutoCloseDelay="60000" Title="Continue Your Session"
EnableRoundedCorners="true" ShowCloseButton="false">
<ContentTemplate>
<div class="infoIcon">
<%--<img src="SRPS_IMAGES/infoIcon.jpg" alt="info icon" />--%></div>
<div class="notificationContent">
Your current working session will be expired in <span id="timeLbl" style="font-weight: bold">
60</span> Sec.<br />
Please continue your work or save your data before auto logout. Otherwise, your
data will be lost.
<telerik:RadButton ID="btncontinueSession" runat="server" Text="Continue" Style="margin-top: 10px;
margin-left: 250px; margin-right: auto;" AutoPostBack="false" OnClientClicked="ContinueSession">
</telerik:RadButton>
</div>
</ContentTemplate>
</telerik:RadNotification>
</ContentTemplate>
</asp:UpdatePanel>

for aspx page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

'set the expire timeout for the session
Session.Timeout = 3
'configure the notification to automatically show 1 min before session expiration
RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000
'set the redirect url as a value for an easier and faster extraction in on the client
RadNotification1.Value = Page.ResolveClientUrl("~/Logout.aspx")

End Sub

Protected Sub OnCallbackUpdate(ByVal sender As Object, ByVal e As RadNotificationEventArgs)

End Sub

answered on 08 Nov 2016, 10:56 AM

Hi,

I don't have such a sample because such code would be highly specific to the application. You could, for example, attach a handler to the desired HTML element(s) with jQuery.

Note that RadNotification is not an activity monitor tool, but a simple toaster popup that can pull data and/or show on certain intervals. Session Notification is not a built-in feature, but an example use case - a block of code performs some application logic and makes the notification show up at some point. This is the approach you should take - implement the detection logic and at the desired point call the notification API to show or update it.

Regards,

Marin Bratanov
Telerik by Progress

Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.

answered on 09 Oct 2019, 05:43 AM

Hi Marin,

I've followed almost all the Telerik forums and docs on this and able to get RadNotification running this from Site.Master under asp:UpdatePanel for asp.net application.

The issue is following code from Site.Master.cs does not work from a page "save" event.

if (!IsPostBack)

{

//set the expire timeout for the session

Session.Timeout = 2;

//configure the notification to automatically show 1 min before session expiration

RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000;

//set the redirect url as a value for an easier and faster extraction in on the client

RadNotification1.Value = Page.ResolveClientUrl("logout.aspx");

}

The code is executed fine however RadNotification still takes you to the logout page(timer kicks in but session is session is still alive I can still access rest of application menus as the session has been reset (somehow it is not updating radNotification under updatepanel which works otherwise). Is there anyway to make it work?

Thanks,

answered on 14 Oct 2019, 05:00 AM

Hello,

Here are my suggestions for this case:

1. Ensure that the notification works as expected when AJAX is disabled:
https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax

2. Check the client-side resetting logic for this specific scenario provided in the Description of the following live sample:
https://demos.telerik.com/aspnet-ajax/notification/examples/sessiontimeout/defaultcs.aspx

3. Try replacing the UpdatePanel with RadAjaxPanel

4. You can also check these samples:
- https://demos.telerik.com/aspnet-ajax/ajaxpanel/application-scenarios/persisting-javascript/defaultcs.aspx
- https://demos.telerik.com/aspnet-ajax/ajaxpanel/application-scenarios/recreate-scripts/defaultcs.aspx

5. If the issue remains, you can open a formal support thread to send us a very basic isolated runnable sample demonstrating the problem so we can further investigate it locally.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.