RadHTMLChart as user control (.ascx)

Hi Joe,

Please have a look into the sample code snippet I tried Which works fine at my end.

ASPX:

<telerik:RadTabStrip ID="TabStrip1" runat="server" MultiPageID="RadMultiPag1">

    <Tabs>

        <telerik:RadTab Text="Chart" runat="server" PageViewID="RadPageView1">

        </telerik:RadTab>

        <telerik:RadTab Text="Grid" runat="server" PageViewID="RadPageView2">

        </telerik:RadTab>

    </Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPag1" runat="server">

    <telerik:RadPageView ID="RadPageView1" runat="server">

        <uc2:WebUserControl ID="WebUserControl1" runat="server" />

    </telerik:RadPageView>

    <telerik:RadPageView ID="RadPageView2" runat="server">

        <telerik:RadGrid ID="RadGrid1" ShowStatusBar="true" DataSourceID="SqlDataSource1"

            runat="server" AutoGenerateColumns="False" PageSize="7" AllowMultiRowSelection="False"

            AllowPaging="True" GridLines="None">

            <MasterTableView>

                <Columns>

                    <telerik:GridBoundColumn HeaderText="CustomerID" DataField="CustomerID" UniqueName="CustomerID">

                    </telerik:GridBoundColumn>

                </Columns>

            </MasterTableView>

        </telerik:RadGrid>

    </telerik:RadPageView>

</telerik:RadMultiPage>

UserControl Page:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"

    Inherits="RadHtmlChart_WebUserControl" %>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000px" Height="400px" OnClientSeriesClicked="OnClientSeriesClicked" OnClientSeriesHovered="OnClientSeriesHovered">

    <PlotArea>

        <Series>

            <telerik:ColumnSeries Name="In 2010 (Markup)">

                <TooltipsAppearance DataFormatString="{0}%">

                </TooltipsAppearance>

                <LabelsAppearance Visible="false">

                </LabelsAppearance>

                <TooltipsAppearance Color="White" />

                <SeriesItems>

                    <telerik:CategorySeriesItem Y="46.3"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="46.5"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="46.2"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="46.4"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="46.9"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="46.6"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="46.4"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="45.8"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="45.1"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="44.1"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="44.0"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="43.5"></telerik:CategorySeriesItem>

                </SeriesItems>

            </telerik:ColumnSeries>

            <telerik:ColumnSeries Name="In 2011 (Markup and DataSource)" DataFieldY="DummyData">

                <TooltipsAppearance Color="White" DataFormatString="{0}%">

                </TooltipsAppearance>

                <LabelsAppearance Visible="false">

                </LabelsAppearance>

                <SeriesItems>

                    <telerik:CategorySeriesItem Y="42.8"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="42.4"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="42.2"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="42.9"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="42.4"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="42.2"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="42.0"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="40.6"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="39.7"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="38.7"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="38.1"></telerik:CategorySeriesItem>

                    <telerik:CategorySeriesItem Y="37.7"></telerik:CategorySeriesItem>

                </SeriesItems>

            </telerik:ColumnSeries>

            <telerik:LineSeries Name="Upper Threshold (DataSource)" DataFieldY="UpperThreshold">

                <Appearance>

                    <FillStyle BackgroundColor="#ff9c00" />

                </Appearance>

                <TooltipsAppearance Color="White" DataFormatString="{0}%">

                </TooltipsAppearance>

                <LabelsAppearance Visible="false">

                </LabelsAppearance>

                <MarkersAppearance Visible="false" />

            </telerik:LineSeries>

        </Series>

        <XAxis>

            <Items>

                <telerik:AxisItem LabelText="January"></telerik:AxisItem>

                <telerik:AxisItem LabelText="Februrary"></telerik:AxisItem>

                <telerik:AxisItem LabelText="March"></telerik:AxisItem>

                <telerik:AxisItem LabelText="April"></telerik:AxisItem>

                <telerik:AxisItem LabelText="May"></telerik:AxisItem>

                <telerik:AxisItem LabelText="June"></telerik:AxisItem>

                <telerik:AxisItem LabelText="July"></telerik:AxisItem>

                <telerik:AxisItem LabelText="August"></telerik:AxisItem>

                <telerik:AxisItem LabelText="September"></telerik:AxisItem>

                <telerik:AxisItem LabelText="October"></telerik:AxisItem>

                <telerik:AxisItem LabelText="November"></telerik:AxisItem>

                <telerik:AxisItem LabelText="December"></telerik:AxisItem>

            </Items>

        </XAxis>

        <YAxis>

            <LabelsAppearance DataFormatString="{0}%">

            </LabelsAppearance>

        </YAxis>

    </PlotArea>

    <Legend>

        <Appearance Position="Right">

        </Appearance>

    </Legend>

    <ChartTitle Text="Firefox market share">

        <Appearance Position="Top">

        </Appearance>

    </ChartTitle>

</telerik:RadHtmlChart>

UserContol Page JavaScript:

<script type="text/javascript">

    function OnClientSeriesClicked(sender, args) {

        alert("OnClientSeriesClicked");

    }

    function OnClientSeriesHovered(sender, args) {

        alert("OnClientSeriesHovered");

    }

</script>

Thanks,
Shinu.

Shinu,

Thanks for the sample code; it helped out a great deal in figuring out the problem.

I copied my main .aspx page and started eliminating bits of HTML markup to finally figure out that the Javascript error is being caused by the  RadMultiPage's RenderSelectedPageOnly="true" attribute. 

So, when I remove that attribute from my HTML, the graph's client click events work as expected.

However, my tab strip control is now top heavy, due to there being multiple tabs with user controls and RadGrids within each tab.

Can you check into this attribute to determine if you can recreate the issue and let me know of any resolutions?

Thanks.

Joe

Hi Joe,

Unfortunately I couldn't replicate the issue at my end.

Thanks,
Shinu.

Hi Joe,

I have tried to reproduce the mentioned issue with the modified version of the provided code by Shinu but to no avail. You can watch the short video in the attached archive and then tell me what I am missing.

Could you please try to reproduce the unexpected behavior with the attached VS example and then tell us what changes you have made, so that we can proceed further with the investigation?

Regards,
Danail Vasilev
Telerik