UpdateProgessBar and DNN

In DNN application, updateProgressBar appears at bottom left corner and is not visible to the user most of the times. Testers and users often complain about this.

Any module that is configured to support partial rendering in DNN will display updateProgressBar during AJAX callbacks.DNN renders content in a div with id 'ContentPane' (Check with your DNN skin; in most of the cases it is BenefitAsia.ascx) Module contents are rendered in a div with id 'ModuleContent'.
UpdateProgressBar is rendered in ModuleContent div. All these controls can be accessed in any DNN module via code-behind,JQUery or DOM object.

Now, let us see how we can access DNN's UpdateProgressBar in all the modules. The best place to do this is OnInit method of DotNetNuke.Entities.PortalModuleBase as all DNN modules are derived from DotNetNuke.Entities.PortalModuleBase. Let us have our custom ModuleBase that derives from DotNetNuke.Entities.PortalModuleBase and Override OnInit method.Note, all modules derive from this custom moduleBase . In OnInit , check whether the module supports partialRendering. If a module supports partial rendering, UpdateProgressBar can be accesed from FindControl method .




public class CustomModuleBase : DotNetNuke.Entities.Modules.PortalModuleBase
{
protected override void OnInit(EventArgs e)
{

base.OnInit(e);

if (null != this.ModuleConfiguration)
{
if (this.ModuleConfiguration.SupportsPartialRendering)
{
Control contentPane = this.ContainerControl.FindControl("ContentPane");
if (contentPane != null)
{
Control moduleContent = contentPane.FindControl("ModuleContent");
if (moduleContent != null)
{
foreach (Control ctrl in moduleContent.Controls)
{
if (ctrl is UpdateProgress)
{

((UpdateProgress)ctrl).ProgressTemplate = new MyProgressBarTemplate();
}
}

}
}
}
}
}
}


Once refrence to UpdateProgressbar is obtained, set the progressTemplate to custom template class that implements ITemplate:InstantiateIn. In our case , it is MyProgressBarTemplate().


public class MyProgressBarTemplate : ITemplate
{

public MDDSProgressBarTemplate()
{

}

public void InstantiateIn(Control container )
{


Image img = new Image();
img.ImageUrl = "/images/animated_progressbar.gif";


Panel prgrsPopup = new Panel ();
prgrsPopup.CssClass ="popupDialogCenter";

Panel prgrsTitle = new Panel ();
prgrsTitle.CssClass = "popup_title";

Label lblTitle = new Label();
lblTitle.Text = "Loading, Please Wait...";
prgrsTitle.Controls.Add(lblTitle );


Panel prgsContainer = new Panel ();
prgsContainer.CssClass = "popup_container";
prgsContainer.Controls.Add (img);

prgrsPopup.Controls.Add(prgrsTitle);
prgrsPopup.Controls.Add(prgsContainer);

container.Controls.Add(prgrsPopup);

}

}

In instantatiateIn , define controls the way you would need the UpdateProgressBarTemplate and add it to container control. Above code has a div with two divs inside it. One with title and other with animated gif.






You can center the div through stylesheet.




.popupDialogCenter
{
position: absolute; /*use position:fixed for non IE-6*/
bottom: 40%
width:250px;
position :fixed
left:50%
z-index :1000001;

}

.popup_container
{
clear: both;
padding: 5px 10px 5px 10px;
}


.popup_title
{
font-size: 9pt;
font-weight: bold;
text-transform:uppercase;
text-align: center;
color: White;
background-color: #002E63;
padding: 5px 3px;
}