Session Timeout Notification - Minutes and Seconds Possible

9 posts, 0 answers
  1. David
    David avatar
    10 posts
    Member since:
    Jun 2012

    Posted 04 Mar 2013 Link to this post

    Hi all,

    This is my first post on these forums as we have only just started using the Telerik Controls. All I can say so far is... WOW. Such a brilliant array or tools on offer.

    What I was wondering was whether it was possible to display a countdown to the notification display in minutes and seconds rather than just seconds. If so, how would you go about doing this?

    David
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Mar 2013 Link to this post

    Hello David,

    Yes, it is possible to display a countdown to the notification display in minutes and seconds using RadNotification. Here is how to achieve the core functionality step by step.

    1. The ShowInterval property is set to automatically show the popup as time before session timeouts as you desire. This simple setting replaces using any timers at all. 
    2. The Value property is set to the desired url of the page which shows when session expires. You could of course evaluate it on the client or send it through different techniques, even hard - code it, but this way is more elegant and the notification takes care of sending it to the client where you can easily extract it.
    3. Declare a handler for the OnCallbackUpdate event (it could be simply blank) and call the client method update() when you want to restart the session. This will automatically perform a callback to the server - codeless boost of performance.
    4. If the session should not be restarted, simply use the client get_value() method to extract the url and redirect to it.

    Please have a look at the following to display a notification with count down timer to remind session expiry notification.

    ASPX:

    <div class="clockSession">
        <div class="contSession">
            <div class="sesseionExpire">
                Your Session will expire in
                <%= Session.Timeout %>
                minutes</div>
            <div class="showNotification">
                Notification will be shown in:</div>
            <div class="timeRemain">
                <span class="timeSeconds"><span id="mainLbl">60 </span></span>seconds</div>
        </div>
    </div>
    <telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"
        Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
        OnClientHidden="OnClientHidden" LoadContentOn="PageLoad" AutoCloseDelay="60000"
        Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true"
        ShowCloseButton="false">
        <ContentTemplate>
            <div class="infoIcon">
                <img src="Img/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>

    JavaScript:
    <script type="text/javascript">
        //The functionality related to the scenario itself is handled by RadNotification automatically out of the box
        var mainLblCounter = null;
        var timeLeftCounter = null;
        var seconds = 60;
        var secondsBeforeShow = 60;
        var mainLabel;
     
        //start the main label counter when the page loads
        function pageLoad() {
            var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel;
            xmlPanel.set_enableClientScriptEvaluation(true);
            mainLabel = $get("mainLbl"); resetTimer("mainLblCounter", updateMainLabel, 1000);
        };
     
        //stop timers for UI
        function stopTimer(timer) {
            clearInterval(this[timer]);
            this[timer] = null;
        };
     
        //reset timers for UI
        function resetTimer(timer, func, interval) {
            this.stopTimer(timer);
            this[timer] = setInterval(Function.createDelegate(this, func), interval);
        };
     
        function OnClientShowing(sender, args) {
            //deal with UI labels
            mainLabel.innerHTML = 0;
            resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);
            stopTimer("mainLblCounter");
        }
     
        function updateMainLabel(toReset) {
            secondsBeforeShow = (toReset == true) ? 60 : secondsBeforeShow - 1;
            mainLabel.innerHTML = secondsBeforeShow;
        }
     
        function OnClientHidden() {
            updateMainLabel(true);
            mainLabel.style.display = "";
            resetTimer("mainLblCounter", updateMainLabel, 1000);
        }
        //update the text in the label in RadNotification
        //this could also be done automatically by using UpdateInterval. However, this will cause callbacks [which is the second best solution than javascript] on every second that is being count
        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);
        }
    </script>

    CSS:
    .clockSession
    {
        width: 409px;
        height: 174px;
        background: url(Img/clockSession.jpg) no-repeat;
    }
             
    .contSession
    {
        width: 270px;
        float: right;
        text-align: center;
        margin: 20px 20px 0 0 ;
    }
             
    .sessionExpire
    {
        color: #3366ff;
        padding-top: 30px;
    }
             
    .showNotification
    {
        padding-top: 15px;
        color: #666;
    }
             
    .timeRemain
    {
        padding-top: 5px;
        color: #000;
    }
             
    .timeSeconds
    {
        font-size: 30px;
        padding-right: 5px;
    }
             
    .infoIcon, .notificationContent
    {
        display: inline-block;
        zoom: 1;
        *display: inline;
    }
             
    .infoIcon
    {
        width: 32px;
        height: 32px;
        margin: 0 10px ;
        vertical-align: top;
    }
             
    .notificationContent
    {
        width: 160px;
        vertical-align: bottom;
    }

    C#:
    protected void Page_Load(object sender, EventArgs e)
            {
                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("SessionExpired.aspx");
                }
            }
     
            protected void OnCallbackUpdate(object sender, RadNotificationEventArgs e)
            {
                  
            }

    Thanks,
    Princy.


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    10 posts
    Member since:
    Jun 2012

    Posted 05 Mar 2013 Link to this post

    Thank you for the instructions. This sets up the session notification perfectly. At the moment it displays a countdown of 60 seconds till the expiration notice appears. If I increase this to 2 minutes, i.e. 120 seconds, it counts down in seconds. Is it possible to alter this to countdown 2:00 > 1:59 > 1:58 etc?
  5. Damian
    Damian avatar
    21 posts
    Member since:
    Mar 2013

    Posted 05 Mar 2013 Link to this post

    Thank you princy for such a neat explanation and the effort you took to post the entire code. I too have been searching for the same and now I got my notification to work precisely.
  6. David
    David avatar
    10 posts
    Member since:
    Jun 2012

    Posted 05 Mar 2013 Link to this post

    Damian, were you able to get it working in minutes?
  7. Sunny
    Sunny avatar
    18 posts
    Member since:
    Jan 2007

    Posted 29 Mar 2013 Link to this post

    Hi Telerik Team Memeber.

    How can i show minutes with seconds like 55:00 > 55:45 > 00:35.

    Regards,
  8. David
    David avatar
    10 posts
    Member since:
    Jun 2012

    Posted 10 Apr 2013 Link to this post

    Sunny, 

    This is what I have been trying to do as well. Any body any ideas?

    David
  9. rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 11 Apr 2013 Link to this post

    there are two lines in this code that set the seconds in the labels. This is where you need to plug some function that will convert them to hh:mm:ss. Take a look here: http://stackoverflow.com/questions/3733227/javascript-seconds-to-minutes-and-seconds for a simple example.

    The two places are:
    in the updateMainLabel() function - the line: mainLabel.innerHTML = secondsBeforeShow; - convert the seconds and pass that new string
    in UpdateTimeLabel() - timeLbl.innerHTML = seconds--; - once again. Just create a function that will take the seconds as a parameter and will return a string.
  10. anandaraj
    anandaraj avatar
    2 posts
    Member since:
    Nov 2015

    Posted 24 Nov 2015 in reply to Princy Link to this post

    Hi david,

    Its working good but its not reset timer for every click event.

    I need to reset timer for every click or select event in same page.

    Thank you

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017