UpdateProgress et display:block, comment mettre son updateprogress a cote de son texte ?
L'UpdateProgress est un contrôle Microsoft Ajax qui permet d'afficher du HTML pendant que l'action de l'UpdatePanel s'effectue :
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<%=DateTime.Now.ToLongTimeString()%>
<asp:Button ID="btn1" runat="server" Text="toto" OnClick="wait" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="upg1" runat="server" AssociatedUpdatePanelID="up1">
<ProgressTemplate>
action en cours
</ProgressTemplate>
</asp:UpdateProgress>
Lorsque l'on click sur le bouton notre UpdateProgress s'affiche bien, par contre il s'affichera en dessous du bouton. En effet, contrairement à l'UpdatePanel, ce contrôle n'a pas de propriété RenderMode qui lui permetrais d'avoir un rendu "en-ligne" plutot que "block" (div / span). De plus le contrôle hérite directement de Control non pas de WebControl on ne peut donc pas même pas modifier les styles, ni hériter pour simplement surcharger la propriété TagKey. On pourrait utiliser un adapter de rendu mais cela ne suffirais pas, et cela devient bien compliqué pour un simple oublie de l'équipe Atlas; oublie qui d'ailleurs n'est pas le seul sur ce contrôle ...
Comment faire alors ?
Première solution avec CSS :
On met la propriété DynamicLayout de l'updateprogress à false puis on force le display en-ligne en CSS. Le problème de cette solution est qu'en définissant la propriété DynamicLayout à false, le JavaScript va afficher ou masquer l'UpdateProgress seulement en jouant avec la propriété CSS visibility; l'UpdateProgress sera donc présent dans le flux mais invisible pour l'utilisateur. Autrement dit, il prendra toujours sa place.
<style type="text/css">
div.DummyUpdateProgress, div.DummyUpdateProgress div {
display:inline!important;
}
</style>
<div class="DummyUpdateProgress">
<asp:UpdateProgress ID="upg1" runat="server" AssociatedUpdatePanelID="up1" DynamicLayout="false">
<ProgressTemplate>
action en cours
</ProgressTemplate>
</asp:UpdateProgress>
</div>
Deuxième solution avec JavaScript :
La méthode consiste à réécrire la méthode Sys.UI._UpdateProgress.prototype._startRequest, c'est cette méthode qui définit le display de l'UpdateProgress :
Sys.Application.add_init(function(){
Type.registerNamespace('CS.Fix')
CS.Fix.UpdateProgressInlineRenderModeIDs = []
Sys.UI._UpdateProgress.prototype.__CS_startRequest = Sys.UI._UpdateProgress.prototype._startRequest;
Sys.UI._UpdateProgress.prototype._startRequest = function(sender, arg){
if (this._dynamicLayout
&& this._pageRequestManager.get_isInAsyncPostBack()
&& Array.contains(CS.Fix.UpdateProgressInlineRenderModeIDs, this.get_id())) {
this.get_element().style.display = 'inline';
}
}
});
Il ne nous reste maintenant plus qu'a ajouté le clientID de l'updateProgress à modifié dans la collection CS.Fix.UpdateProgressInlineRenderModeIDs, pour cela on utiliser la méthode ScriptManager.RegisterStartupScript :
ScriptManager.RegisterStartupScript(this, typeof(_Default), "FixUpdateProgress" + upg1.ClientID,
String.Format(@"Sys.Application.add_init(function(){{
CS.Fix.UpdateProgressInlineRenderModeIDs.push('{0}');
}});", upg1.ClientID), true);
Libre à vous ensuite de faire un contrôle qui hérite de UpdateProgress possédant une propriété RenderMode qui enregistre automatiquement le clientID dans le tableau d'UpdateProgress à modifier.