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

Timer in Rad Loading Panel

4 Answers 74 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Tracy
Top achievements
Rank 1
Tracy asked on 06 Jul 2012, 12:43 AM
Hi,

Is there a way to get a loading panel to display the seconds that has elapsed while it is being displayed.   For example, if I have a radgrid that displays a loading panel when a row is saved.  The save process may take 10 - 15 seconds and I would like to display the seconds as they go by in the loading panel. 

I know I can display a label on a page and attach a timer to it but I want to display the time elapsed in the loading panel.

Is there a way to do this?

Thank you for your help.

4 Answers, 1 is accepted

Sort by
0
lan luo
Top achievements
Rank 1
answered on 06 Jul 2012, 07:26 PM
I have figured it out. Using item.checked = true;
0
Tracy
Top achievements
Rank 1
answered on 08 Jul 2012, 12:39 AM
I don't think this reply was supposed to be an answer to my question.

Thank You
0
Accepted
Iana Tsolova
Telerik team
answered on 09 Jul 2012, 02:52 PM
Hi Tracy,

Such functionality is not built-in the RadAjaxLoadingPanel. However you can add a label to it and update the label with javascript during the ajax request, through the time the RadAjaxLoadingPanel is displayed. You can handle the loading panel client-side events and start the javascript for updating the label with the elapsed time on OnClientShhowing and stop the javascript on OnClientHiding. Another option is to handle the OnRequestStart and OnResponseEnd client-side events of the RadAjaxManager/RadAjaxPanel.

For more information on the above client-side events, check this article:
http://www.telerik.com/help/aspnet-ajax/ajax-client-side-events.html

All the best,
Iana Tsolova
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.
0
Tracy
Top achievements
Rank 1
answered on 11 Jul 2012, 12:12 AM
Hi Iana,

Thank you for your response.  Using your post I was able to find a very nice javascript timer posted by Emanuele Feronato at http://www.emanueleferonato.com/2006/06/04/javascript-chronometerstopwatch/
 
I modified it a little to fit my needs and then attached it to the OnClientShowing and OnClientHiding events of the Loading Panel.  Now when my Loading Panel is displayed at time clicks off every second showing the time elapsed.
<telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="Telerik"  EnableEmbeddedSkins="true" OnClientShowing="StartTimer" OnClientHiding="StopTimer">
           <asp:Label ID="lblTimeElapased" runat="server" Text="Time Elapsed:" Font-Bold="true" Font-Names="Calibri" Font-Size="18px"  ForeColor="#FF1900" />
           <asp:TextBox ID="txtTimeElapsed"  runat="server"  Text="00:00:000"   Font-Bold="true" Font-Names="Calibri" Font-Size="18px" ForeColor="#FF1900"  BackColor="Transparent" BorderStyle="None" />
       </telerik:RadAjaxLoadingPanel>  />

Javascript
/*This function is used to show a timer on the page.  This requires a textbox on the page with the id of txtTimeElapsed*/
var timerCount = 0;
var startTime = null;
 
function ShowTimer() {
    if (timerCount) {
        clearTimeout(timerCount);
        clockID = 0;
    }
 
    if (!startTime) {
        startTime = new Date();
    }
 
    var endTime = new Date();
    var timeDifference = endTime.getTime() - startTime.getTime();
    endTime.setTime(timeDifference);
 
    var minutesElapsed = endTime.getMinutes();
    if (minutesElapsed < 10) {
        minutesElapsed = "0" + minutesElapsed;
    }
 
    var secondsElapsed = endTime.getSeconds();
    if (secondsElapsed < 10) {
        secondsElapsed = "0" + secondsElapsed;
    }
 
        var millisecondsElapsed = endTime.getMilliseconds();
        if (millisecondsElapsed < 10) {
            millisecondsElapsed = "00" + millisecondsElapsed;
        }
        else if (millisecondsElapsed < 100) {
            millisecondsElapsed = "0" + millisecondsElapsed;
        }
 
    document.getElementById('txtTimeElapsed').value = minutesElapsed + ":" + secondsElapsed + "." + millisecondsElapsed;
    timerCount = setTimeout("ShowTimer()", 1000);
}
 
function StartTimer() {
    if (!timerCount) {
        startTime = new Date();
        document.getElementById('txtTimeElapsed').value = "00:00";
        timerCount = setTimeout("ShowTimer()", 1000);
    }
    else {
        var endTime = new Date();
        var timeDifference = endTime.getTime() - startTime.getTime();
        endTime.setTime(timeDifference);
 
        var minutesElapsed = endTime.getMinutes();
        if (minutesElapsed < 10) {
            minutesElapsed = "0" + minutesElapsed;
        }
 
        var secondsElapsed = endTime.getSeconds();
        if (secondsElapsed < 10) {
            secondsElapsed = "0" + secondsElapsed;
        }
 
        var millisecondsElapsed = endTime.getMilliseconds();
        if (millisecondsElapsed < 10) {
            millisecondsElapsed = "00" + millisecondsElapsed;
        }
        else if (millisecondsElapsed < 100) {
            millisecondsElapsed = "0" + millisecondsElapsed;
        }
    }
}
 
function StopTimer() {
    if (timerCount) {
        clearTimeout(timerCount);
        timerCount = 0;
 
        var endTime = new Date();
        var timeDifference = endTime.getTime() - startTime.getTime();
        endTime.setTime(timeDifference);
 
        var minutesElapsed = endTime.getMinutes();
        if (minutesElapsed < 10) {
            minutesElapsed = "0" + minutesElapsed;
        }
 
        var secondsElapsed = endTime.getSeconds();
        if (secondsElapsed < 10) {
            secondsElapsed = "0" + secondsElapsed;
        }
 
        var millisecondsElapsed = endTime.getMilliseconds();
        if (millisecondsElapsed < 10) {
            millisecondsElapsed = "00" + millisecondsElapsed;
        }
        else if (millisecondsElapsed < 100) {
            millisecondsElapsed = "0" + millisecondsElapsed;
        }
        document.getElementById('txtTimeElapsed').value = minutesElapsed + ":" + secondsElapsed + "." + millisecondsElapsed;
    }
    startTime = null;
}

Again, thank you for your help.
Tracy

Tags
Ajax
Asked by
Tracy
Top achievements
Rank 1
Answers by
lan luo
Top achievements
Rank 1
Tracy
Top achievements
Rank 1
Iana Tsolova
Telerik team
Share this question
or