This is a migrated thread and some comments may be shown as answers.

RadHTMLChart as user control (.ascx)

4 Answers 98 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 07 Nov 2013, 10:36 PM
I have implemented the RadHTMLChart as a user control (.ascx) and am adding it to the aspx page on a TabStrip control.  The grid renders just fine, however when I try adding either of the two client side events, OnClientSeriesClicked and OnClientSeriesHover, when the page loads, I receive the following Javascript error:  Microsoft JScript runtime error: 'OnClientSeriesClicked' is undefined.

I have extracted the HTML and C# code onto a separate .aspx page implementing the RadHTMLChart directly with the page and the client event work in that scenario.

What is it about implementing the chart as a user control or having it with a tabstrip control that could be causing the Javascript error?  Is there an attribute/property on the chart control that I need to set?

Thanks.

Joe

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 08 Nov 2013, 08:02 AM
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.
0
Joe
Top achievements
Rank 1
answered on 08 Nov 2013, 03:22 PM
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. 
<telerik:RadMultiPage ID="multiPages" runat="server" SelectedIndex="0" RenderSelectedPageOnly="true">

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

0
Shinu
Top achievements
Rank 2
answered on 11 Nov 2013, 07:53 AM
Hi Joe,

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

Thanks,
Shinu.
0
Danail Vasilev
Telerik team
answered on 12 Nov 2013, 03:02 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (HTML5)
Asked by
Joe
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Joe
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or