New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

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:

javascript
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).

ASP.NET
<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 the Sys.Application.load event.

C#
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);
    }
}
In this article
DescriptionSolution
Not finding the help you need?
Contact Support