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 67 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Manpreet
Top achievements
Rank 1
Manpreet asked on 17 Jan 2012, 06:55 AM
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

Sort by
0
Accepted
Richard
Top achievements
Rank 1
answered on 18 Jan 2012, 05:22 PM
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">
<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!
0
Bozhidar
Telerik team
answered on 18 Jan 2012, 05:37 PM
Hi Manpreet,

You can see how to customize the progress area in this demo. You can also find additional information in this help article.
 
Regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Manpreet
Top achievements
Rank 1
answered on 20 Jan 2012, 05:44 AM
thanx jumpstart,

but im having a problem with the speed part... the speed just won't show up even if i have checked the speed . everything else is just as you have shown in the screenshot.

waiting for the new solution,
regards
0
Manpreet
Top achievements
Rank 1
answered on 20 Jan 2012, 06:43 AM
hi Bozhidar,

thanx for your reply. but i am getting a problem with the speed... as it is showing in your demos...the speed won't just show up while i run the project
0
Richard
Top achievements
Rank 1
answered on 20 Jan 2012, 04:20 PM
Manpreet:

I'm not sure of the reason that there is no value for your .TransferSpeed indicator. I did find this forum thread which might help:
RadProggressArea TransferSpeed

Hope this helps.
0
Bozhidar
Telerik team
answered on 20 Jan 2012, 05:02 PM
Hi Manpreet,

Are you experiencing this problem in the sample solution provided by Richard, or just in your own? If so, please specify the version of the controls you are using, and send us your web.config file. Also, which browser are you using, and does this behaviour occur in other browsers? We need all the information we can get, in order to figure out what is causing the problem.
 
All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Upload (Obsolete)
Asked by
Manpreet
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Bozhidar
Telerik team
Manpreet
Top achievements
Rank 1
Share this question
or