Use Telerik Report Viewer in ASP.NET AJAX Applications
Description
Telerik Report Viewer disappear after a Post Back while AJAX is enabled in the ASP.NET AJAX Web Forms application.
Unlike the Telerik UI for ASP.NET AJAX components, the Telerik Reporting for ASP.NET Web Forms does not support AJAX (asp:UpdatePanel
, telerik:RadAjaxManager
, telerik:RadAjaxPanel
) out of the box.
The Report Viewer's initializer scripts are called inside window.onload
event and work when the document first loads, however, an AJAX Post Back does not trigger this event, thus the Telerik Report Viewer application does not get initialized.
The functions that will only trigger on the initial load of the page but not on subsequent AJAX requests:
window.onload = function () { }
jQuery(function () { });
$(document).ready(function () { });
Solution
The solution would be to call the initializer scripts inside the Sys.Application.load event that will trigger upon AJAX requests.
To do that, attach the PreRender
event to the Report Viewer which will trigger on every request (see ASP.NET Page Life Cycle).
<telerik:ReportViewer ID="ReportViewer1" runat="server" OnPreRender="ReportViewer1_PreRender">
</telerik:ReportViewer>
In the event handler, you can check if the request is an AJAX PostBack (IsInAsyncPostBack), then register a Startup Script that will initialize the Report Viewer after the AJAX Post Back is complete.
The
InitializeReportViewer()
method parses the Report Viewer's HTML DOM to find the initializer scripts generated for it then call those scripts inside theSys.Application.load
event.
protected void ReportViewer1_PreRender(object sender, EventArgs e)
{
// Access the Application's ScriptManager
ScriptManager sm = RadScriptManager.GetCurrent(Page);
// Check if the request is an AJAX Post Back
if (sm.IsInAsyncPostBack)
{
// Call a custom method
InitializeReportViewer((ReportViewer)sender);
}
}
protected void InitializeReportViewer(ReportViewer reportViewer)
{
// Search pattern for regex
string pattern = string.Format(@"syncReportViewerState\([^)]*\);|jQuery\('#{0}'\)\.telerik_ReportViewer\([^)]*\);", reportViewer.ID);
// find the two functions containing all the params from the generated HTML string of reportViewer.ToString()
MatchCollection matches = Regex.Matches(reportViewer.ToString(), pattern);
// Concatenate both scripts
string reportingScripts = string.Empty;
foreach (Match match in matches)
{
reportingScripts += match.Value;
}
if (!string.IsNullOrEmpty(reportingScripts))
{
string startupScript = string.Format(@"
function pageLoadHandler() {{
{0}
Sys.Application.remove_load(pageLoadHandler);
}}
Sys.Application.add_load(pageLoadHandler);", reportingScripts);
// Register a Startup Script that will be executed after the AJAX Post Back
ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), startupScript, true);
}
}