Timer in Rad Loading Panel

[Tracy]

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.

[lan luo]

I have figured it out. Using item.checked = true;

[Tracy]

I don't think this reply was supposed to be an answer to my question.

Thank You

[Iana Tsolova]

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

[Tracy]

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