Wednesday, September 28, 2011

how to Add ajax Process Image in Form


User Control 1
<div id="Layer1" style="position: fixed; background-position: center; top: 0%; left: 0%;
                z-index: 100; background-color: #E2EAFF; height: 100%; width: 100%; opacity: 0.4;
                filter: alpha(opacity=60);">
 </div>

User Control 2
<img src="/Images/WebResource.gif" style="position: fixed; background-position: center; top: 50%; left: 50%; z-index: 100;" />

Aspx controls
<%@ Register Src="~/WebUI/UserControl/usrProcessImageBG.ascx" TagName="usrProcessImageBG"
    TagPrefix="ucpbg" %>
<%@ Register Src="~/WebUI/UserControl/usrProcessImageSrc.ascx" TagName="usrProcessImageSrc"
    TagPrefix="ucpsrc" %>
<asp:UpdateProgress ID="upro1" runat="server" DisplayAfter="0">
        <ProgressTemplate>
       <ucpbg:usrProcessImageBG ID="usrProcessImageBG1" runat="server" />
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
        <ProgressTemplate>
       <ucpsrc:usrProcessImageSrc ID="usrProcessImageSrc1" runat="server" />
        </ProgressTemplate>
</asp:UpdateProgress>
….
<asp:UpdatePanel ID="upPanel_userindex" runat="server">
        <ContentTemplate>      
        ……
       </ContentTemplate>
</asp:UpdatePanel>

Teleik Controls
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true">
       <ucpbg:usrProcessImageBG ID="usrProcessImageBG1" runat="server" />
       <ucpsrc:usrProcessImageSrc ID="usrProcessImageSrc1" runat="server" />
</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
        LoadingPanelID="RadAjaxLoadingPanel1" CssClass="Biblio" Width="950px" Height="100%"  >
      …
</telerik:RadAjaxPanel>