UpdateProgress a tutta pagina

lunedì 26 maggio 2008 - 17.35

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: lun 26 mag 2008 - 17:35

Ciao a tutti,
ho visto che, usando un ModalPopupExtender e la sua proprietà BackgroundCssClass, è possibile aprire un popup ajax che impedisce all'utente di agire su altre parti della pagina.
Vorrei ottenere lo stesso effetto per l'UpdateProgress, in modo da evitare altri click prima che l'operazione asincrona sia terminata. Ho provato ad inserire dentro il suo ProgressTemplate un div o un panel ... ma senza successo.

<WEX:UpdateProgress ID="wexUpdateProgress" runat="server" DisplayAfter="0" DynamicLayout="True" EnableViewState="False">
<ProgressTemplate>
<TABLE class="ProgressTemplate" style="POSITION: absolute; TOP: 40%; LEFT: 40%;">
<TR CLASS="PageHeader"><TD NOWRAP ALIGN="Center"> NOME APPLICAZIONE </TD></TR>
<TR height="5"><TD></TD></TR>
<TR><TD ALIGN="Center"><IMG src="../Images/Buttons/ProgressBar.gif" /></TD></TR>
<TR><TD CLASS="Label" ALIGN="Center"><EM> Elaborazione in corso </EM></TD></TR>
<TR height="5"><TD></TD></TR>
<TR CLASS="PageHeader"><TD NOWRAP ALIGN="Center"> www.miosito.it </TD></TR>
</TABLE>
</ProgressTemplate>
</WEX:UpdateProgress>

dove gli stili sono ...

.ProgressTemplate
{
MARGIN: 0;
PADDING: 2px;
BACKGROUND-COLOR: #FFFFFF ;
BORDER-COLOR: #005C6A ;
BORDER-WIDTH: 2px ;
BORDER-STYLE: solid ;
}
TR.PageHeader {font-weight: bold; font-size: x-small; height: 1.5em; color: #ffffff; background-color: #005c6a; }

Qualche idea?
Grazie mille, Davide

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: lun 26 mag 2008 - 21:42

>Qualche idea?
>Grazie mille, Davide

Ciao Davide,
prova con questo codice:

<div style="background:green;position:absolute;left:0;top:0;width:100%;overflow:none" id="Test">Waiting...</div>

Al posto di Waiting ci metti quello che ti pare, un GIF animato di Progress o altro.
Il Div ha posizionamento assoluto, a coordinate 0,0 quindi in alto a sinistra e si estende verso destra per il 100% e per il basso ho impostato 1000 pixel ma si può mettere anche meno, vedi un po' la risoluzione degli schermi che usate.

Oppure puoi impostare la Height del DIV con un Javascript in questo modo appena si apre la pagina:

<script type="text/javascript">
var ob=document.getElementById('Test');
ob.style.height=window.document.body.offsetHeight-5 + 'px'; 
</script>

Questo codice è compatibile con IE7. Per FF ci sono delle variazioni sul tema.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

ridaria Profilo | Expert

905 messaggi | Data Invio: mar 27 mag 2008 - 08:45

....... e basta solo questo??????

E l'update progress Scompare?????

Se è così è una gran bella svolta!

Riccardo
Ridaria

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: mar 27 mag 2008 - 08:52

>....... e basta solo questo??????
>E l'update progress Scompare?????
>Se è così è una gran bella svolta!

Se il codice che ti ho dato lo metti nel Template dell'UpdateProgress appena parte una operazione lunga, appare quel DIV che sta on top a tutto il resto quindi se tu clicchi clicchi sul Div e non riesci a cliccare sui controlli nella pagina che stanno sotto il Div.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: mar 27 mag 2008 - 11:25

Grazie Brainkiller ... come al solito i tuoi consigli si rivelano assai utili.
Ci ho lavorato un po' su ... più che altro per centrarlo anche verticalmente nella pagina, ma non sono ancora completamente soddisfatto. Ecco il codice ...

<ProgressTemplate>
<DIV id="divProgressTemplate" CLASS="ProgressTemplate" onresize="javascript:ResizeProgressTemplate();">
<DIV id="tblProgressTemplate" />
<TABLE class="ProgressTemplate">
...............
</TABLE>
</DIV>
</DIV>
</ProgressTemplate>

Codice JavaScript:

function ResizeProgressTemplate() {
var height = window.document.body.offsetHeight + 'px' ;
var obj = document.getElementById('divProgressTemplate') ;
if (obj == null) return ;
obj.style.height = height ;
obj = document.getElementById('tblProgressTemplate') ;
if (obj == null) return ;
obj.style.height = height ;
}

Gli stili:

DIV.ProgressTemplate
{
POSITION: absolute ;
BACKGROUND-COLOR: Gray ;
FILTER: alpha(opacity=85) ;
OPACITY: 0.85 ;
LEFT: 0 ;
TOP: 0 ;
WIDTH: 100% ;
OVERFLOW: none ;
TEXT-ALIGN: center ;
VERTICAL-ALIGN: middle ;
MARGIN: 0 ;
PADDING: 0 ;
BORDER: 0 ;
}

TABLE.ProgressTemplate
{
MARGIN: 0;
PADDING: 2px;
BACKGROUND-COLOR: #FFFFFF ;
BORDER-COLOR: #005C6A ;
BORDER-WIDTH: 2px ;
BORDER-STYLE: solid ;
POSITION: absolute ;
LEFT: 40% ;
TOP: 40% ;
}

Il div interno "tblProgressTemplate" l'ho aggiunto solo per posizionare la tabella al centro anche in verticale. Funziona, ma ho notato già questo difetto (che in realtà succedeva anche prima): quando ho un popup aperto (ModalPopupExtender) e scateno qualche evento in modalita ajax ... il "template" dell'elaborazione in corso compare dietro al popup. Quanta pazienza

Davide

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: mar 27 mag 2008 - 15:18

>Grazie Brainkiller ... come al solito i tuoi consigli si rivelano
>assai utili.

Prego.

>Ci ho lavorato un po' su ... più che altro per centrarlo anche
>verticalmente nella pagina, ma non sono ancora completamente
>soddisfatto. Ecco il codice ...

Bene, io non sono un gran specialista dei CSS

Immaginavo si potesse fare.

>Il div interno "tblProgressTemplate" l'ho aggiunto solo per posizionare
>la tabella al centro anche in verticale. Funziona, ma ho notato
>già questo difetto (che in realtà succedeva anche prima): quando
>ho un popup aperto (ModalPopupExtender) e scateno qualche evento
>in modalita ajax ... il "template" dell'elaborazione in corso
>compare dietro al popup. Quanta pazienza

Mah, a sto punto io ti consiglierei di lavorare sullo stile CSS z-index che ti consente di portare più o in alto in basso di livello i vari layer. Forse resta dietro perchè ha uno z-index maggiore o minore.
Fai qualche esperimento.
ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

volperubbia Profilo | Senior Member

375 messaggi | Data Invio: mer 28 mag 2008 - 09:36

Grazie ... ho messo style="Z-INDEX: 99999" sulla tabella all'interno del ProgressTemplate.
Tutto ok.

Davide

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !