Can't update a div in a RadPageView with JavaScript

3 posts, 1 answers
  1. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 22 May 2012 Link to this post

    I'm adding a jqplot chart to a page that has a RadTabStrip and a RadMultiPage on it. If I put the target <div> for the plot outside of the RadMultiPage, the chart gets rendered. If I put the target <div> inside the RadMultiPage, however, it doesn't get rendered. This makes me think the JavaScript that's attempting to render the chart in the <div> can't find it.

    How should I refer to the <div> in my JavaScript?

    Here's how my <div> is defined?
    <div id="chartdiv" style="height:300px; width:600px; border: none;"></div>

    Here's the JavaScript that references the <div> and how it's placed in the RadPageView:
    <telerik:RadPageView ID="Achievement" runat="server">
        <div class="responseDiv"><asp:Label ID = "AchievementLabel" runat="server"></asp:Label></div>
     
        <script type="text/javascript">
            (function ($) {
                $(window).load(function () {
                    var exceedPoints = [['3rd', 218], ['4th', 223]];
                    var plot1 = $.jqplot('chartdiv', [exceedPoints], {
                        seriesDefaults: { pointLabels: { show: true } },
                        series: [{ label: 'Exceed' }],
                        grid: { drawGridlines: false },
                        seriesColors: ['#666699'],
                        title: 'Reading Scores'
                    });
                });
            })($telerik.$);
        </script>
    </telerik:RadPageView>


    Thanks!

    Bryan
  2.
  3. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 25 May 2012 Link to this post

    Hi Bryan,

    By default the RadPageView is rendered as a div element so it should not prevent the "chartdiv" to be found.  After further testing it seems that the chart is not rendered when the div is placed inside a hidden container such as the RadPageView before it's shown. If the pageview is set as selected upon initial load then the chart is properly rendered.

    Since I presume that the RadMultiPage is being used with RadTabStrip control, I've prepared a sample page showing how to deal with the experience problem.

    All the best,
    Dimitar Terziev
    the Telerik team
    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 their blog feed now.
  5. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 29 May 2012 Link to this post

    Dimitar:

    Yes! That's fixed it. Thank you very much!

    Bryan
Back to Top