RadHTMLChart as user control (.ascx)

5 posts, 0 answers
  1. Joe
    Joe avatar
    2 posts
    Member since:
    Sep 2013

    Posted 07 Nov 2013 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    2 posts
    Member since:
    Sep 2013

    Posted 08 Nov 2013 Link to this post

    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

  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Nov 2013 Link to this post

    Hi Joe,

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

    Thanks,
    Shinu.
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017