Styling the RadProgress area and greying out page problems

[Paul Clark]

Hello

When I upload a document I want the page to be "greyed-out" and the progress area to display on top so they can't move away from the page.
I have read and tried your the article here http://www.telerik.com/support/kb/aspnet-ajax/window/using-radupload-progress-area-in-radwindow.aspx "Using RadUpload Progress area in RadWindow" but it won't work for me as I have a user control on the page that automatically posts back every so often and this causes the radwindow to display each time it posts back.

I decided to try and use the progress template and have almost acheived what I am trying to do by using the following:

       <telerik:RadProgressArea Visible="true" ID="radProgressArea" runat="server" DisplayCancelButton="true" style="background-color:Gray; filter: alpha(opacity=60);
                    opacity:0.60; position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%;">
            <ProgressTemplate>
                <div id="ProgressDiv" style="background-color:Gray; filter: alpha(opacity=60);
                    opacity:0.60; position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%;">
                 </div>
                 <div style="border-width:1px; border-color:Black; width:500px; z-index:1001; height:400px; top:50px; left:50px;
                     background-color:White; position:absolute;">
                    <ul>
                        <li>
                        <h6>TotalProgressBar:</h6>
                        <div style="position: relative; height: 168px; width: 168px;">
                            <div id="PrimaryProgressBarInnerDiv" runat="server" style="background-color: Blue;
                                height: 0%; width: 168px; vertical-align: bottom; position: absolute; top: 0;
                                left: 0; z-index: 900;">
                            </div>
                       </div>
                    </li>
                    <li><strong>TotalProgress:</strong> <span runat="server" id="PrimaryValue"></span></li>
                    <li><strong>TotalProgressPercent:</strong> <span runat="server" id="PrimaryPercent"></span></li>
                    <li><strong>FilesCount:</strong> <span runat="server" id="SecondaryValue"></span></li>
                    <li><strong>FilesCountPercent:</strong> <span runat="server" id="SecondaryPercent"></span></li>
                    <li><strong>RequestSize:</strong> <span runat="server" id="PrimaryTotal"></span></li>
                    <li><strong>SelectedFilesCount:</strong> <span runat="server" id="SecondaryTotal"></span></li>
                    <li><strong>CurrentFileName:</strong> <span runat="server" id="CurrentOperation"></span></li>
                    <li><strong>TimeElapsed:</strong> <span runat="server" id="TimeElapsed"></span></li>
                    <li><strong>TimeEstimated:</strong> <span runat="server" id="TimeEstimated"></span></li>
                    <li><strong>TransferSpeed:</strong> <span runat="server" id="Speed"></span></li>
                </ul>


                 </div>
            </ProgressTemplate>
        </telerik:RadProgressArea>

Although this greys out my page I cannot work out how to get the two progress bars as in the original rad progress area to display.

My second attempt was just apply a style to the progress area as so:

   <telerik:RadProgressArea Visible="true" ID="radProgressArea" runat="server" DisplayCancelButton="true"
          style="background-color:Gray; position:absolute; z-index:1000; top:0;
              left:0; width:100%; height:100%;">

        </telerik:RadProgressArea>

This is more like what I want to acheive, but I need the grey background opacity to be set but the actual progress area to be solid.

So my Question is, how do I display the progress bars in a progresstemplate, or how can I set the opacity of the background of the progress area, whilst still having the progress area it's self solid?

Thanks

[Paul Clark]

Hello

I think I have worked out my problem with the progress template.
It appears the ProgressBarOuterDiv is missing from the documentation.

I am not sure, but I viewed the source of the page with the none customised progressbar and took the ids and classes from there.

  <telerik:RadProgressArea Visible="true" ID="radProgressArea" runat="server" DisplayCancelButton="true" Width="100%">
            <ProgressTemplate>
              <div id="ProgressDiv" style="background-color:Gray; filter: alpha(opacity=60);
                    opacity:0.60; position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%;">
                 </div>
                 <div style=" border-color:Black; z-index:1001; top:50px; width:395px; height:210px; left:50px;
                     background-color:White; position:absolute;" >
                     <div class="ruShadow">
                         <div id="radProgressArea_Panel">
                             <ul class="ruProgress">
                                 <li class="ruFilePortion">
                                     <div id="PrimaryProgressBarOuterDiv" class="ruBar" runat="server">
                                         <div id="PrimaryProgressBarInnerDiv" runat="server">
                                             <!-- -->
                                         </div>
                                     </div>
                                     Uploaded <span id="PrimaryPercent" runat="server"></span>% (<span id="PrimaryValue" runat="server"></span> ) Total
                                     <span id="PrimaryTotal" runat="server"></span></li>
                                 <li class="ruFileCount">
                                     <div id="SecondaryProgressBarOuterDiv" class="ruBar" runat="server">
                                         <div id="SecondaryProgressBarInnerDiv" runat="server">
                                             <!-- -->
                                         </div>
                                     </div>
                                     Uploaded files: <span id="SecondaryPercent" runat="server"></span>% (<span id="SecondaryValue" runat="server"></span>)
                                     Total files: <span id="SecondaryTotal" runat="server"></span></li>
                                 <li class="ruCurrentFile">Uploading file: <span id="CurrentOperation" runat="server"></span></li>
                                 <li class="ruTimeSpeed">Elapsed time: <span id="TimeElapsed" runat="server"></span>&nbsp;Estimated
                                     time: <span id="TimeEstimated" runat="server"></span>&nbsp;Speed: <span id="Speed" runat="server"></span></li>
                             </ul>
                         </div>
                     </div>
                 </div>


            </ProgressTemplate>
        </telerik:RadProgressArea>

It appears to be working correctly now.