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

HtmlChart Nested in RadGrid

2 Answers 152 Views

Chart (HTML5)

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

Ron asked on 12 Jul 2012, 06:08 PM

Hello again,

I have come across a strange rendering issue with the HtmlChart as you can see in the screenshot attached. The chart is nested in a radgrid and populates the data just fine. The axis for both y and x along with the points in the line series all render correctly with no issue. But the actual grid and the line itself of the chart render way off to the right for some reason. This seems to happen in all versions of IE from 6 thru 9.

Any help would of course be appreciated.

Following is the markup for the radgrid on the page:

<telerik:RadGrid ID="ReportsDataGrid" runat="server"

AutoGenerateColumns="false"

AllowPaging="true"

AllowFilteringByColumn="true"

DataSourceID="ReportsDataSource"

ShowGroupPanel="true"

PageSize="25">

<GroupingSettings CaseSensitive="false" />

<MasterTableView DataSourceID="ReportsDataSource" DataKeyNames="SenderAddress,SourceIP"

GroupLoadMode="Server" CommandItemDisplay="Top">

<Columns>

<telerik:GridBoundColumn DataField="SenderAddress" HeaderText="Sender Email Address" />

<telerik:GridBoundColumn DataField="SourceIP" HeaderText="Sender Source IP Address" />

<telerik:GridBoundColumn DataField="Messages" HeaderText="Messages" DataFormatString="{0:N0}" />

<telerik:GridBoundColumn DataField="Volume" HeaderText="Volume (KB)" DataFormatString="{0:N0}" />

</Columns>

<PagerStyle

Mode="NextPrevAndNumeric"

Position="Bottom"

AlwaysVisible="true"

/>

<CommandItemSettings

ShowAddNewRecordButton="false"

ShowExportToExcelButton="true"

ShowExportToCsvButton="true"

/>

<NestedViewTemplate>

<asp:Panel runat="server" ID="InnerContainer" Visible="false">

<div class="nestedchartcontentpane" style="position:relative">

<asp:Label ID="SelectedRecordEmail" runat="server" Text='<%# Eval("SenderAddress") %>' Visible="false" />

<asp:Label ID="SelectedRecordIP" runat="server" Text='<%# Eval("SourceIP") %>' Visible="false" />

<telerik:RadHtmlChart runat="server" ID="ReportsDataChart" Width="900" Height="300"

Transitions="true" DataSourceID="ReportsNestedDataSource" >

<Legend>

<Appearance Visible="false" />

</Legend>

<PlotArea>

<XAxis MajorTickType="Outside" MinorTickType="None" DataLabelsField="Date">

<LabelsAppearance DataFormatString="{0}" RotationAngle="45" />

<TitleAppearance Visible="true" Text="Date" />

<MinorGridLines Visible="false" />

</XAxis>

<YAxis MajorTickType="Outside" MinorTickType="None">

<LabelsAppearance DataFormatString="{0:N0}" RotationAngle="0" />

<TitleAppearance Visible="true" Text="Messages" />

<MinorGridLines Visible="false" />

</YAxis>

<Series>

<telerik:LineSeries Name="Messages" MissingValues="Gap" DataField="Messages">

<LabelsAppearance Visible="false" />

<TooltipsAppearance DataFormatString="{0:N0}" />

</telerik:LineSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

<asp:SqlDataSource ID="ReportsNestedDataSource" runat="server"

ConnectionString="<%$ ConnectionStrings:asp_statistics %>"

SelectCommand="GetReportsExchTopRelayAddressesChart"

SelectCommandType="StoredProcedure">

<SelectParameters>

<asp:ControlParameter ControlID="ReportsSelectedDate" Name="date"

PropertyName="SelectedDate" Type="DateTime" />

<asp:ControlParameter ControlID="ReportsOn" Name="type"

PropertyName="SelectedValue" Type="String" />

<asp:ControlParameter ControlID="ReportsDataUnit" Name="unit"

PropertyName="SelectedValue" Type="String" />

<asp:ControlParameter ControlID="SelectedRecordEmail" Name="address"

PropertyName="Text" Type="String" />

<asp:ControlParameter ControlID="SelectedRecordIP" Name="sourceip"

PropertyName="Text" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

</div>

</asp:Panel>

</NestedViewTemplate>

</MasterTableView>

<ExportSettings

HideStructureColumns="true"

ExportOnlyData="true"

IgnorePaging="true"

OpenInNewWindow="true"

/>

</telerik:RadGrid>

2 Answers, 1 is accepted

answered on 17 Jul 2012, 12:21 PM

RadHtmlChartInRadGrid.zip

Hi Ronald,

The depicted problem is quite strange. I tired to reproduce it by using the online demo HtmlChart in Grid column which shows a similar setup, but without success. Please compare my attachment to your actual project and let me know if there are any significant differences in the setup. You can check the RadHtmlChart appearance on my end via this screen capture.

I am willing to help you with your problem, but I need to reproduce it locally in order to provide a more to the point answer. Please open a support ticket and try modifying the attached sample so that it matches your scenario. If this is not possible, you can also prepare a simple, runnable page that isolates the issue so that I can inspect it on my end.

Greetings,
Slav
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.