Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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.

Posted: vendredi 25 mai 2007 03:16 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01