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

时间:2015-07-16 09:52:37

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

我已经实现了一个模块,我正在使用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>

我只想填写第二个条形图,即我想使用客户端seriesevent在红色图表中调用我的服务器端方法

1 个答案:

答案 0 :(得分:2)

通过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。它改变了当前图表的数据源,但客户端逻辑是相同的。

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