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 to show waitingpopup or probressbar animated in onclick button with postbacktrigger

Thread ID:

Created:

Updated:

Platform:

Replies:

123257 Mar 1,2016 06:07 PM Mar 23,2016 08:12 AM ASP.NET Web Forms 5
loading
Tags: WaitingPopup
Roimer Machacón Otero
Asked On March 1, 2016 06:07 PM

Hi we're using a bootstrap modal popup to show a list of element for allow download to the users of a excel file, Now we want show a animation in the modal (waitingpopup or progressbar) for show to the users while the file is generated. Exist a form for do this?

Ezhil S [Syncfusion]
Replied On March 2, 2016 07:05 AM

Hi Roimer,

Thank you for contacting Syncfusion support.

In order to achieve this scenario on displaying WaitingPopup until the Excel document is generated and downloaded, we suggest you to use the workaround solution using cookies. We have defines a server side event on clicking the file list inside the Bootstrap Modal Popup, that generates the excel along with the given token value, “fileDownloadToken” is appended to response using AppendCookie()in the attached sample. In the client side script for the click event call show() method to display the WaitingPopup and periodically check the token value from the server side response with the cookie value, whether the document is generated. Once the token is found and matches with the cookie value hide the WaitingPopup control and clear the cookie values and time intervals. Please refer the following code snippet,
<code>
[ASPX]

<ej:WaitingPopup ID="WaitingPopup1" runat="server" ShowOnInit="false" Target="#myModal .modal-content"></ej:WaitingPopup>


   <button type="button" class="btn btn-default btn-lg" id="myBtn" data-toggle="modal" data-target="#myModal">Click to open Modal popup</button>

<input name="download_token_value_input" id="download_token_value" type="hidden" />


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <!-- Modal pop up content.

            Here we have used list of link buttons to download excel files -->                

      <div class="modal-body">

        <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="blockUIForDownload()" OnClick="LinkButton1_Click">File 1</asp:LinkButton> <br /><br />

         <asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="blockUIForDownload()" OnClick="LinkButton1_Click">File 2</asp:LinkButton><br /><br />

         <asp:LinkButton ID="LinkButton3" runat="server" OnClientClick="blockUIForDownload()" OnClick="LinkButton1_Click">File 3</asp:LinkButton>

       </div>

    </div>

[Script]

     <script type="text/javascript">


         var fileDownloadCheckTimer, LoadingPopup;

         function blockUIForDownload() {

             LoadingPopup = $("#<%=WaitingPopup1.ClientID%>").data("ejWaitingPopup");

             var token = new Date().getTime(); //use the current timestamp as the token value

             $('#download_token_value').val(token);

             LoadingPopup.show();

             fileDownloadCheckTimer = window.setInterval(function () {

                 var cookieValue = $.cookie('fileDownloadToken');

                 if (cookieValue == token)

                     finishDownload();

             }, 100);

         }


         function finishDownload() {

             window.clearInterval(fileDownloadCheckTimer);

             $.cookie('fileDownloadToken', null); //clears this cookie value

             LoadingPopup.hide();

         }


</script>
Note: In order to use cookies in your application please refer the jquery.cookie.js script to it
[CodeBehind]

protected void LinkButton1_Click(object sender, EventArgs e)

        {

            Response.AppendCookie(new HttpCookie("fileDownloadToken", Request.Form["download_token_value_input"]));

            //Excel documeny generation and download codes
       }
</code>

You can download the sample prepared from the link below,
http://www.syncfusion.com/downloads/support/forum/123257/ze/Waitingpopup-1833775852

Please let us know if you have any other queries.

Regards,
Ezhil S


Roimer Machacón Otero
Replied On March 7, 2016 04:26 PM

Hi, we applied the solution exposed for you, and this work correctly, Thanks you!

Ezhil S [Syncfusion]
Replied On March 8, 2016 01:58 AM

Hi Roimer,

Thanks for the update.

We are glad that the suggested solution worked at your end.

Let us know if you need further assistance.

Regards,
Ezhil S

Roimer Machacón Otero
Replied On March 19, 2016 12:01 PM

Hi, now have another question respect for use the waiting popup, in the version 12.4.0.34 that is our version in use not accept the tag Target in the definition of the waiting popup. For the case that is working correctly we use it for all the form, now, we are need apply only in a modal popup in only client side. Viewing the example is registered a cookie in code behind

Ezhil S [Syncfusion]
Replied On March 23, 2016 08:12 AM

Hi Roimer,

Sorry for the delay.

Query 1: in the version 12.4.0.34 that is our version in use not accept the tag Target in the definition of the waiting popup

We have provided Target property support for WaitingPopup only from release 13.1.0.30 onwards. So that we suggest you to upgrade to our latest volume release.
http://www.syncfusion.com/forums/123314/essential-studio-2015-volume-4-service-pack-release-v13-4-0-63-available-for-download

Query 2: For the case that is working correctly we use it for all the form, now, we are need apply only in a modal popup in only client side. Viewing the example is registered a cookie in code behind

As per the initial requested scenario, you need to display WaitingPopup until a document has been getting generated from click event which is done in code behind. Here we can’t get the status of document generated in code behind in client side because on generating and saving the document on code behind, which uses Response.End() method to save the file and that will terminate the entire program life cycle and stops all the responses further in the web application. The behavior of the End() method restricts further navigation on the web application to call scripts/methods. Please refer the following link for further details: 
http://stackoverflow.com/questions/9982995/close-window-after-response-end 
https://msdn.microsoft.com/en-us/library/system.web.httpresponse.end.aspx 
So that as a work around we have suggested on using cookies to add a token from code behind for hiding the WaitingPopup from client side script.

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.

;