RadAjax Loading panel throws error: The data necessary to complete this operation is not yet available.

[Sneh]

i have a radGrid that contains a 'Download file' button, that downloads file from server. The grid has a RadAjax Loading panel that shows a loading icon while time consuming operations are being performed.

The Loading icon works in all cases but interferes with Download functionality. when i select download, the loading icon appears indefinitely & after sometime the following error is displayed:

The data necessary to complete this operation is not yet available.

Detailed error:
Sys.WebForms.PageRequestManagerParserErrorException: 
The message received from the server could not be parsed. Common causes for this error are when the response
 is modified by calls to Response.Write(), 
+response filters, HttpModules, or server trace is enabled.

Following is my code:


////////////////////////////This is for RadAjax Loading panel//////////////

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function centerLoadingPanel()
             {                
                  centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));
             }
           function centerElementOnScreen(element)
            {
               var scrollTop = document.body.scrollTop;
                var scrollLeft = document.body.scrollLeft;
                var viewPortHeight = document.body.clientHeight;
                var viewPortWidth = document.body.clientWidth;
                if (document.compatMode == "CSS1Compat") {
                    viewPortHeight = document.documentElement.clientHeight;
                    viewPortWidth = document.documentElement.clientWidth;
                   if (!$telerik.isSafari) {
                        scrollTop = document.documentElement.scrollTop;
                        scrollLeft = document.documentElement.scrollLeft;
                    }
               }
                var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
                var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
                var top = scrollTop + topOffset - 40;
                var left = scrollLeft + leftOffset - 70;
                element.style.top =  "0px";
                element.style.left = "0px";
                var loadingImage = document.getElementById('<%= RadAjaxLoadingPanel1.FindControl("Image11").ClientID %>');
                loadingImage.style.left = "100px";
            }
            function RequestStart(sender, eventArgs) 
            {
               
                var loadingImage = document.getElementById('<%= RadAjaxLoadingPanel1.FindControl("Image11").ClientID %>');
                var panel1 = $get("<%= PagerPanel.ClientID %>");
                           if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
                    $get("<%= RadAjaxLoadingPanel1.ClientID %>").style.height = document.documentElement.scrollHeight + "px";
                }
            }
         
        </script>
    </telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<ClientEvents OnRequestStart="centerLoadingPanel()"  />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="PagerPanel" >          
                <UpdatedControls >
                    <telerik:AjaxUpdatedControl  ControlID="PagerPanel" LoadingPanelID="RadAjaxLoadingPanel1"  UpdatePanelHeight="100%" UpdatePanelRenderMode="Block"  ></telerik:AjaxUpdatedControl>
                </UpdatedControls>               
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  Transparency="0"  EnableSkinTransparency="false" Direction="LeftToRight" ZIndex="-1"    BackgroundPosition="Center"   IsSticky="true" CssClass="MyModalPanel" Height="100%"   >
                    <div class="loading">
                     <table  style=" background-color:White; color:White;height:150px; width:311px; vertical-align:middle " >
                         <tr align="center" >
                             <td align="center" >
                                <img src="~/images/XS-Docs_WaitAnimation.gif"  id="Image11" runat="server" alt="img"  />               
                             </td>
                         </tr>
                     </table>
                   </div>
    </telerik:RadAjaxLoadingPanel>


//////////////////////////THis is for Download file code///////////////////

   public bool DownloadFile(string methodname, object[] obj)
        {
            string URi = ConfigurationManager.AppSettings["ServiceURL"].ToString();
           
            WebClient proxy = new WebClient();

            byte[] abc = proxy.DownloadData((new Uri(URi)));
            
            MemoryStream strm = new MemoryStream(abc);

            if (abc.Length > 0)
            {
                string _DownloadableProductFileName = obj[2].ToString();
                BinaryReader _BinaryReader = new BinaryReader(strm);
                long startBytes = 0;
                HttpContext.Current.Response.Clear();
                HttpContext.Current.Response.Buffer = false;
                HttpContext.Current.Response.AddHeader("Accept-Ranges", "bytes");
                //Set the ContentType

                string Content_Type = "";
                if (obj[1].ToString() == "PDF")
                    Content_Type = "application/pdf";
           
                HttpContext.Current.Response.ContentType = Content_Type;

                //Add the file name and attachment, 
                //which will force the open/cancel/save dialog to show, to the header
                HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=" + _DownloadableProductFileName);

                //Add the file size into the response header
                HttpContext.Current.Response.AddHeader("Content-Length", (strm.Length - startBytes).ToString());
                HttpContext.Current.Response.AddHeader("Connection", "Keep-Alive");

                //Set the Content Encoding type
                HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;

                //Send data
                _BinaryReader.BaseStream.Seek(startBytes, SeekOrigin.Begin);
                int maxCount = (int)Math.Ceiling((strm.Length - startBytes + 0.0) / 1024);
                int i;
                for (i = 0; i < maxCount && HttpContext.Current.Response.IsClientConnected; i++)
                {
                    HttpContext.Current.Response.BinaryWrite(_BinaryReader.ReadBytes(1024));
                    HttpContext.Current.Response.Flush();
                }

                _BinaryReader.Close();
                if (i < maxCount)
                    return false;
                else
                    return true;
                
            }
            else
            {
                return false;
            }
           
        }
/////////////////////////////////End///////////////////////////////////////

[Maria Ilieva]

Hi Sneh,

Please review the following help article for more information on downloading files with ajax:
http://www.telerik.com/help/aspnet-ajax/ajax-download.html

All the best,
Maria Ilieva
the Telerik team