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

Can't update a div in a RadPageView with JavaScript

2 Answers 56 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
bdrennen
Top achievements
Rank 1
bdrennen asked on 23 May 2012, 12:00 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar Terziev
Telerik team
answered on 25 May 2012, 09:29 AM
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.
0
bdrennen
Top achievements
Rank 1
answered on 29 May 2012, 03:49 PM
Dimitar:

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

Bryan
Tags
TabStrip
Asked by
bdrennen
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
bdrennen
Top achievements
Rank 1
Share this question
or