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///////////////////////////////////////
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///////////////////////////////////////