If you look into AJAX.vb in the source code, then you will find that the progress.gif image is hardcoded :
Public Shared Function WrapUpdatePanelControl(ByVal objControl As Control, ByVal blnIncludeProgress As Boolean) As Control
... remove for brevity ...
If blnIncludeProgress Then
'create image for update progress control
Dim objImage As System.Web.UI.WebControls.Image = New System.Web.UI.WebControls.Image()
objImage.ImageUrl = "~/images/progressbar.gif" 'hardcoded
objContentTemplateContainer.Controls.Add(AJAX.CreateUpdateProgressControl(objPanel.ID, objImage))
End If
Return objPanel
End Function
But there always a solution to "hack". Some of them are :
- Modify WrapUpdatePanelControl to add CssClass attribute to objImage. The CssClass value should taken from configuration or similar like that, so it's value will be dynamically loaded. Recompile the DNN framework. :)
- Using JavaScript to modify progress bar value at runtime.
If you right click on your DNN page and see it's HTML source then you will find that DNN framework will create this tag to create progress bar indicator :
<div id="dnn_ctr371_HelloWorld_UP_Prog" style="display:none;">
<img src="/dotnetnuke/images/progressbar.gif" style="border-width:0px;" />
</div>
371 is the ModuleID, HelloWorld is the ModuleName and the rest is static string. When using javascript, the idea is getting reference to that div element at runtime. So, this code will construct it's form based on your module (I hardcode the dnn_ctrl and _UP_Prog string):
var progressbarid = "dnn_ctr<%= this.ModuleId.ToString() %>_<%=this.ModuleConfiguration.ModuleName %>_UP_Prog";
First, create your Module (mine using C#) and add new user control (let say HelloWorld.ascx). Make sure you check the Support Partial Rendering when registering HelloWorld.ascx from Module Definitions. Write this code :
<style type="text/css">
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
<script language="javascript" type="text/javascript">
function ChangeLayout() {
var progressbarid = "dnn_ctr<%= this.ModuleId.ToString() %>_<%=this.ModuleConfiguration.ModuleName %>_UP_Prog";
var gambar = document.getElementById(progressbarid);
gambar.className="modalPopup";
}
</script>
<asp:Button ID="button1" Text="Show" runat="server" OnClick="button1_Click" />
<br />
<asp:Label ID="label1" runat="server"></asp:Label>
The logic is simple. I just add one button with one label. Then when the button clicked, i will simulate long running process using System.Threading.Thread.Sleep(2000) in order to show the progress indicator.
Open your code behind, and add this into your code :
protected void Page_Load(object sender, EventArgs e) {
}
protected override void OnInit(EventArgs e) {
button1.Attributes.Add("onfocus", "ChangeLayout();");
base.OnInit(e);
}
protected void button1_Click(object sender, EventArgs e) {
System.Threading.Thread.Sleep(2000); // Just simulate to long running process
label1.Text += "test";
}
Then save, and load your module. When you click the button1, you'll see that the progress bar indicator change it's style. :)
Well, it works on the first time when you click the button. Second click to the button will failed. :(
But i think you will got the idea. Or maybe someone has a good solution on it. Or maybe DNN Core Team will add a functionality to change the behavior of progress bar to be more dynamic and can be customized in the next release of DNN.
HTH.
CMIIW.