HTMLChart Control Drill Down Scenario Not Working Inside User Control

2 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Apr 2013

    Posted 19 Jun 2013 Link to this post


    I am working on developing a Visual Web Part for SharePoint 2010, which creates a custom user control and deploys it to SharePoint. My scenario is almost identical to the scenario at: 

    My code is working great as a standalone website, but when I deploy as a custom user control and webpart, I get this error when I try to click on a chart series for a drill down:

    1. Uncaught Sys.InvalidOperationException: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'ctl00_m_g_cc567be1_ebdc_434d_9f34_8b649e4824a6_ctl00_ctl00_m_g_cc567be1_ebdc_434d_9f34_8b649e4824a6_ctl00_RadHtmlChart1Panel'. If it is being updated dynamically then it must be inside another UpdatePanel. ScriptResource.axd:5
      1. Error.invalidOperationScriptResource.axd:5
      2. Sys.WebForms.PageRequestManager._onFormSubmitCompletedScriptResource.axd:5
      3. (anonymous function)ScriptResource.axd:5
      4. (anonymous function)ScriptResource.axd:5
      5. Sys.Net.WebRequest.completedScriptResource.axd:5
      6. _onReadyStateChange

    Based on my research, this error seems to be related to the way my RadAjaxManager works. My guess is that there must be some conflict with the SharePoint environment and how it controls webparts. If I had to guess, I would say that SharePoint is creating some kind of an ajax update container around the entire web part, and then my RadAjaxManager is creating another one, which is giving me this nested update panel error.

    Here is the relevant code:

    <telerik:RadButton runat="server" Icon-PrimaryIconUrl="/_layouts/images/back.gif" ID="Refresh"
        Text="Restore Original Chart" OnClick="Refresh_Click">
    <telerik:RadCodeBlock ID="codeBlock" runat="server">
        <script type="text/javascript">
            function pageLoad(sender, eventArgs) {
                if (!eventArgs.get_isPartialLoad()) {
                    //$find("<%--RadAjaxManager.GetCurrent(this).ClientID --%>").ajaxRequest("InitialPageLoad");
            function OnClientSeriesClicked(sender, args) {
                if (args.get_seriesName() != "seriesPlanMemberCount") $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(args.get_category());
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="LoadingPanel1">
            <telerik:AjaxSetting AjaxControlID="Refresh">
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="LoadingPanel1">
    <telerik:RadHtmlChart ID="RadHtmlChart1" Skin="Sitefinity" DataSourceID="SqlDataSource1" runat="server" Height="600px"
        Width="600px" OnClientSeriesClicked="OnClientSeriesClicked">
        <ChartTitle Text="OCERS Members By Employer">
            <Appearance Align="Center" BackgroundColor="White" Position="Top">
                <telerik:ColumnSeries DataFieldY="MEMBERCOUNT" Name="seriesMemberCount">
            <XAxis DataLabelsField="EMPLOYER_NAME">
                <LabelsAppearance Visible="true" RotationAngle="90">
                <MinorGridLines Visible="false" />
                <LabelsAppearance DataFormatString="{0}" Visible="true">
                <MinorGridLines Visible="false" />
            <Appearance Visible="false">

    and in the code behind:

    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
                if (e.Argument == "InitialPageLoad")
                    Refresh_Click(sender, e);
                    if (RadHtmlChart1.PlotArea.Series[0].Name == "seriesMemberCount")
                        SqlDataSource2.SelectParameters[0].DefaultValue = e.Argument;
                        RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "PLAN_NAME";
                        RadHtmlChart1.PlotArea.Series[0].DataFieldY = "MEMBERCOUNT";
                        RadHtmlChart1.PlotArea.Series[0].Name = "seriesPlanMemberCount";
                        RadHtmlChart1.Skin = "Office2010Blue";
                        RadHtmlChart1.ChartTitle.Text = e.Argument + " Plan Members By Plan Type";
                        RadHtmlChart1.DataSourceID = "SqlDataSource2";
                        //Refresh.Visible = true;

  2. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 24 Jun 2013 Link to this post

    Hello John,

    Note that a scenario in which you try to ajaxify telerik controls which are positioned within a user controls works differently than a scenario when controls are loaded directly on a web form. Therefore you need to create the RadAjaxManager control to the web part class and add it to the Controls collection of the web part itself.

    More information as well as an example on how to do that is available in telerik ajax issue with sharepoint 2010 forum thread, where is described a similar issue like yours. You can also find useful Create an AJAX-enabled SharePoint WebPart that uses RadControls help article which gives more information on the topic.

    Danail Vasilev
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top