We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How Do I grey out the web page while showing the Waiting pop-up during postback from a button click

Thread ID:

Created:

Updated:

Platform:

Replies:

118635 Mar 26,2015 06:33 AM Mar 27,2015 10:48 AM ASP.NET Web Forms 1
loading
Tags: WaitingPopup
Lizette Korsbæk Andersen
Asked On March 26, 2015 06:33 AM

Hi I am currently working on an Asp.Net web page where I have a grid and two buttons, when a button is clicked it updates the grid (it retrives date and binds it to the grid) What I would like is for the WaitingPopUp to appear when the button is clicked, it has to appear in the middle of the page and the rest of the page must be greyed out and the popup to be highlighted(in focus) then, when the page is finished loading the grid completly, the popup will disappear and the page will again be in focus.
 
Is there anyway I can achieve this?



Ezhil S [Syncfusion]
Replied On March 27, 2015 10:48 AM

Hi Andersen,

Thank you for contacting Syncfusion support.

The requested scenario to show and hide the WaitingPopup control on loading grid data can be achieved using show() and hide() APIs in client side scripts. Obtain the WaitingPopup control element in client side script to show the popup element on BeginRequestHandler() and hide the popup under EndRequestHandler(), which works only with <UpdatePanel>. BeginRequestHandler() is called before the post back to load data and returns to EndRequestHandler() after post back completes. Please refer the following code snippet,

<code>

[ASPX]

<asp:UpdatePanel ID="Panel1" runat="server">

<ContentTemplate>

<ej:WaitingPopup runat="server" ID="waiting1" ShowImage="true" Text="Grid data loading"></ej:WaitingPopup>

<ej:Grid runat="server" ID="Grid1" AllowPaging="true">

<Columns>

<ej:Column Field="FirstName" HeaderText="First Name" />

<ej:Column Field="LastName" HeaderText="Last Name" />

<ej:Column Field="Email" HeaderText="Email" />

</Columns>

</ej:Grid>

<asp:Button runat="server" ID="btn1" ClientIDMode="Static" Text="Grid data" OnClick="btn1_Click" />

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btn1" />

</Triggers>

</asp:UpdatePanel>

[Script]

<script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function BeginRequestHandler() {

// to show popup on initiating postback

var popupObj = $("#<%=waiting1.ClientID%>").data("ejWaitingPopup");

popupObj.show();

}

function EndRequestHandler() {

// hide popup after postback

var popupObj = $("#<%=waiting1.ClientID%>").data("ejWaitingPopup");

popupObj.hide();

}

</script>

</code>

Please download the simple sample that depicts the requested behavior from below link:

http://www.syncfusion.com/downloads/support/forum/118533/WaitingPopup_f118635-848105630.zip

Please let us know if you have any other queries.

Regards,

Ezhil S


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;