how to get only one progress bar in radprogress area

Thread is closed for posting
7 posts, 1 answers
  1. Manpreet
    Manpreet avatar
    3 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    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
  2. Answer
    jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 18 Jan 2012 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 18 Jan 2012 Link to this post

    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
  5. Manpreet
    Manpreet avatar
    3 posts
    Member since:
    Jan 2012

    Posted 19 Jan 2012 Link to this post

    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
  6. Manpreet
    Manpreet avatar
    3 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

    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
  7. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 20 Jan 2012 Link to this post

    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.
  8. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 20 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017