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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

how to get only one progress bar in radprogress area

6 Answers, 1 is accepted