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

how to get only one progress bar in radprogress area

6 Answers 214 Views

Upload (Obsolete)

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

Manpreet asked on 17 Jan 2012, 06:55 AM

radprogress-area.png

hi,
my name is manpreet and i would like to know that how i can configure my radprogress area to show only the progress of the current file being uploaded alongwith its speed . I do not want the progress bar which is at the bottom. it would be more clear from the attachment below.

I have tried the property window but even after deselecting the files count bar , i still get it when i run the project. i have even refreshed my browser a lot of times, even switched to chrome, mozilla and IE9 but nothing seem to work. i have even tried clearing my browser cache but everything is in vain. help me out !

to be precise i just need one bar and that must show : current file being uploaded, %age of the current file uploaded, speed of transfer, time estimated

Regards,
Manpreet S

6 Answers, 1 is accepted

Accepted

answered on 18 Jan 2012, 05:22 PM

CustomRadProgressIndication.png

Manpreet:

I have created a simple sample to demonstrate the customization of the RadProgressArea according to your requirements.

I based this on the Upload/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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</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!