Telerik + RadChart: How to call a Server side Method on ClientSeriesClick Event

Question

I have implemented a module where i am using telerik red bar chart.And i want to generate another bar graph on click on bar of existing chart i.e there are two charts one is shown on page load and second is detailed one which is shown after click on any bar of first chart.Have mentioned my code below:-

<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>

Above code i have used for generating my first chart

Second Chart which i am trying to fill in my 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);
}

My Ajax Call

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

I just want to fill second bar graph i.e i want to use client seriesevent for calling my server side method in red chart

score 2 · Answer 1 · answered Sep 08 '15 at 10:27

Invoke an AJAX request through the RadAjaxManager client-side API: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/client-side-programming/overview. Something like:

getAjaxManager().ajaxRequest("someOptionalArgument");

You can find similar code in the drilldown chart demo: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx. It changes the datasource of the current chart but the client-side logic is the same.

On the server, just make sure to recreate the second chart with each subsequent postback, as any other server control.

Telerik + RadChart: How to call a Server side Method on ClientSeriesClick Event

1 Answers1