ProgressArea - Customization with Templates

Upload large file(s) to see the customized progress area
Total Progress
Total Progress Percent
%
Total Progress:
Files Count:
Files Count Percent:
Request Size:
Selected Files Count:
Current File Name:
Time Elapsed:
Time Estimated:
Transfer Speed:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadProgressArea contains a ProgressTemplate property, which can be used to fully customize its content and style. For example you can rearrange the progress elements or create your own progress bar.

You can also use the OnClientProgressBarUpdating and OnClientProgressUpdating events in order to modify the look and feel of the progress area to create your own custom progress gadgets.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />

    <script type="text/javascript">
        //<![CDATA[
        function onClientProgressBarUpdating(progressArea, args) {
            progressArea.updateVerticalProgressBar(args.get_progressBarElement(), args.get_progressValue());
            args.set_cancel(true);
        }
        //]]>
    </script>

    <qsf:MessageBox runat="server" Icon="Info" Type="Info" ID="InformationBox1">
        Upload large file(s) to see the customized progress area
    </qsf:MessageBox>
    <div class="demo-container size-narrow">
            <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" EnableInlineProgress="false" MultipleFileSelection="Automatic"></telerik:RadAsyncUpload>
            <telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1" OnClientProgressBarUpdating="onClientProgressBarUpdating" Width="500px">
                <ProgressTemplate>
                    <div class="rpaInner">
                        <div class="rpaHeader">
                            <strong>Total Progress</strong>
                        </div>
                        <div class="rpaBody">
                            <dl>
                                <dt class="rpaStatFirst">Total Progress Percent</dt>
                                <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                                <dt>Total Progress:</dt>
                                <dd><span runat="server" id="PrimaryValue"></span></dd>
                                <dt>Files Count:</dt>
                                <dd><span runat="server" id="SecondaryValue"></span></dd>
                                <dt>Files Count Percent:</dt>
                                <dd><span runat="server" id="SecondaryPercent"></span></dd>
                                <dt>Request Size:</dt>
                                <dd><span runat="server" id="PrimaryTotal"></span></dd>
                                <dt>Selected Files Count:</dt>
                                <dd><span runat="server" id="SecondaryTotal"></span></dd>
                                <dt>Current File Name:</dt>
                                <dd><span runat="server" id="CurrentOperation"></span></dd>
                                <dt>Time Elapsed:</dt>
                                <dd><span runat="server" id="TimeElapsed"></span></dd>
                                <dt>Time Estimated:</dt>
                                <dd><span runat="server" id="TimeEstimated"></span></dd>
                                <dt>Transfer Speed:</dt>
                                <dd><span runat="server" id="Speed"></span></dd>
                            </dl>
                        </div>
                    </div>
                </ProgressTemplate>
            </telerik:RadProgressArea>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?