Manpreet:
I have created a simple sample to demonstrate the customization of the RadProgressArea according to your requirements.
I based this on the
/Customizing Progress Area UI demo that is online at
http://demos.telerik.com/aspnet-ajax/upload/examples/customizingradprogressareaui/defaultcs.aspx
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<table>
<tr>
<td>
<telerik:RadUpload ID="RadUpload1" InitialFileInputsCount="1" AllowedFileExtensions=".png,.jpg,.txt,.zip,.rar"
TargetFolder="~/uploads" runat="server">
</telerik:RadUpload>
<p><asp:Button runat="server" ID="Button1" Text="Submit" OnClick="Button1_Click" /></p>
</td>
<td>
<telerik:RadProgressArea ID="RadProgressArea1" runat="server" DisplayCancelButton="True" ProgressIndicators="TotalProgressBar, TotalProgressPercent, CurrentFileName, TimeEstimated, TransferSpeed" />
</td>
</tr>
<tr>
<td>
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="validateRadUpload"
ErrorMessage="Please select at least one allowed file type" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
<script type="text/javascript">
function validateRadUpload(source, e) {
e.IsValid = false;
var upload = $find("<%= RadUpload1.ClientID %>");
var inputs = upload.getFileInputs();
for (var i = 0; i < inputs.length; i++) {
//check for empty string or invalid extension
if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {
e.IsValid = true;
break;
}
}
}
</script>
</td>
<td>
<div class="smallModule">
<div class="rc1">
<div class="rc2">
<div class="rc3" style="width: 240px; padding: 20px;">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="reportResults" runat="server" Visible="False">
<HeaderTemplate>
Uploaded files:<br />
</HeaderTemplate>
<ItemTemplate>
'<%#DataBinder.Eval(Container.DataItem, "FileName")%>' ( '<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>' )<br />
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Default.aspx.cs:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
args.IsValid = (RadUpload1.InvalidFiles.Count == 0);
}
private void BindResults()
{
if (RadUpload1.UploadedFiles.Count > 0)
{
labelNoResults.Visible = false;
reportResults.Visible = true;
reportResults.DataSource = RadUpload1.UploadedFiles;
reportResults.DataBind();
}
else
{
labelNoResults.Visible = true;
reportResults.Visible = false;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
BindResults();
}
}
Customizations of the RadProgress area are fully covered on the
RadProgressArea Configuring documentation page.
See the attached "customradprogressindication.png" screenshot for the displayed Progress Indication.
Hope this helps!