Telerik + RadChart：如何在 ClientSeriesClick 事件上调用服务器端方法答案

【问题标题】：Telerik + RadChart: How to call a Server side Method on ClientSeriesClick EventTelerik + RadChart：如何在 ClientSeriesClick 事件上调用服务器端方法
【发布时间】：2015-10-05 16:54:45
【问题描述】：

我已经实现了一个模块，我正在使用 Telerik 红色条形图。我想在现有图表的点击条上生成另一个条形图，即有两个图表，一个显示在页面加载上，第二个是详细的一个，它是单击第一个图表的任何条后显示。在下面提到了我的代码：-

<asp:Panel ID="Panel1" runat="server">
    <telerik:radhtmlchart id="RadHtmlChart2" runat="server" width="600" height="400"
        onclientseriesclicked="OnClientSeriesClicked">
                <%-- <ClientEvents OnSeriesClick="OnSeriesClick" />--%>
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries Name="Series 1">
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="30" />
                                <telerik:CategorySeriesItem Y="10" />
                                <telerik:CategorySeriesItem Y="20" />
                            </SeriesItems>
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis>
                        <LabelsAppearance RotationAngle="33">
                        </LabelsAppearance>
                        <Items>
                            <telerik:AxisItem LabelText="Item 1" />
                            <telerik:AxisItem LabelText="Item 2" />
                            <telerik:AxisItem LabelText="Item 3" />
                        </Items>
                    </XAxis>
                </PlotArea>
            </telerik:radhtmlchart>
    <asp:Panel ID="Panel2" runat="server">
        //My Second chart Shown Here
    </asp:Panel>
</asp:Panel>

上面我用来生成我的第一个图表的代码

我正在尝试填写我的 asp Panel2 的第二张图表。

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    RadHtmlChart chart = new RadHtmlChart();
    chart.ID = "chart2";
    ColumnSeries cs = new ColumnSeries();
    CategorySeriesItem csi = new CategorySeriesItem();
    cs.DataFieldY = "TOTALCALLS";

    cs.SeriesItems.Add(csi);
    chart.PlotArea.Series.Add(cs);
    Panel2.Controls.Add(chart);
}

我的 Ajax 调用

<telerik:radcodeblock id="RadCodeBlock1" runat="server">    
    <script>
        function getAjaxManager() {
            return $find("<%=RadAjaxManager1.ClientID%>");
        }
    </script>    
</telerik:radcodeblock>

我只想填充第二个条形图，即我想使用客户端系列事件在红色图表中调用我的服务器端方法

【问题讨论】：

标签： telerik c#-3.0 dotnetnuke dotnetnuke-5 radchart

【解决方案1】：

通过 RadAjaxManager 客户端 API 调用 AJAX 请求：http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/client-side-programming/overview。比如：

getAjaxManager().ajaxRequest("someOptionalArgument");

您可以在下钻图表演示中找到类似的代码：http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx。它改变了当前图表的数据源，但客户端逻辑是一样的。

在服务器上，只需确保在每次后续回发时重新创建第二个图表，就像任何其他服务器控件一样。

【讨论】：