HTMLChart Control Drill Down Scenario Not Working Inside User Control

[John]

Hello,

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: 

http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx 

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.createScriptResource.axd:5
   2. Error.invalidOperationScriptResource.axd:5
   3. Sys.WebForms.PageRequestManager._onFormSubmitCompletedScriptResource.axd:5
   4. (anonymous function)ScriptResource.axd:5
   5. (anonymous function)ScriptResource.axd:5
   6. Sys.Net.WebRequest.completedScriptResource.axd:5
   7. _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:RadButton>
<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) {
            //console.log(args.get_category());
            if (args.get_seriesName() != "seriesPlanMemberCount") $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(args.get_category());
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="LoadingPanel1">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="Refresh">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="LoadingPanel1">
                </telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<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">
        </Appearance>
    </ChartTitle>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="MEMBERCOUNT" Name="seriesMemberCount">
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="EMPLOYER_NAME">
            <LabelsAppearance Visible="true" RotationAngle="90">
            </LabelsAppearance>
            <MinorGridLines Visible="false" />
        </XAxis>
        <YAxis>
            <LabelsAppearance DataFormatString="{0}" Visible="true">
            </LabelsAppearance>
            <MinorGridLines Visible="false" />
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="false">
        </Appearance>
    </Legend>
</telerik:RadHtmlChart>

and in the code behind:

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "InitialPageLoad")
            {
                Refresh_Click(sender, e);
            }
            else
            {
                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;
                }
            }
        }

[Danail Vasilev]

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.


Regards,
Danail Vasilev
Telerik