Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Issues With Chart and Grid Binding

1 Answer 58 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Satish
Top achievements
Rank 1
Satish asked on 29 Aug 2012, 08:31 PM
ChartandGridBinding.png
Hello, 
        I have two updatepanels at left and right side to the page and these two update panel devided by Splitter. Please see below attached screen shot for good understanding.

         the left hand panel has two tabs, those are gridparameter tab and Chartparameter tab.

Requirement:
         When we select GridParameter tab and hit the button, we have to load the Grid controle and need to hide the Chart controle.
         When we select ChartParameter tab and hit the button, we have to load the Chart controle and need to hide the Grid controle with multiple serieses of different datasets.

        After my several attempts, I'm able to load grid, but not able to load the chart. Assuming there are some special settings I have to make.

       Please find the below sample code, after removing my original code. ASPX and ASPX.VB files code. 
      Just take the any scenario but, when I use the Gridparameter tab and clicking on the appropriate button, we have to load Grid control.
       In the same way, when we use Chartparameter tab and click on the appropriate button, we have to load Chart controle with multiple serieses of different datasets.
       
       Please suggest a good code sample.

ASPX:

<%

 

@ Page Title="Reports - Test Management Suite" Language="VB" MasterPageFile="~/TMSuiteMaster.master"

 

AutoEventWireup="false" CodeFile="Reports.aspx.vb" Inherits="forms_Reports" %>

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.Design" TagPrefix="telerik" %>

<%

 

@ Register TagPrefix="cntxt" TagName="RIContextMenu" Src="~/controls/RIContextMenu.ascx" %>

<%

 

--<%@ Register TagPrefix="a" Namespace="System.Web.UI.DataVisualization.Charting" Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Register TagPrefix="a" Namespace="Telerik.Charting.Styles" Assembly="Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

--

 

 

%>

<

 

 

asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

 

<!-- CssPopUp.js has definition for toggle() function required by splitter. -->

 

<script type="text/javascript" language="JavaScript" src="../javaScripts/CssPopUp.js"></script>

<%

 

--By Default, charts showing a rendering image at backgroud. to remove it, we have to use the below setting--%>

 

<style type="text/css">

 

.RadChart .rchImgWrap div

{

 

background-image: none;

}

 

</style>

</

 

 

asp:Content>

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">

 

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

 

</telerik:RadStyleSheetManager>

 

<cntxt:RIContextMenu ID="RIContextMenu1" runat="server" />

 

<div id="pageHeaderWrapper" class="pageHeader">

 

<span>Reliability Reports</span>

 

<asp:UpdatePanel ID="updHeaderLabel" runat="server" RenderMode="Inline">

 

<ContentTemplate>

 

<asp:Label ID="lblHeaderLabel" Text="" runat="server"></asp:Label>

 

</ContentTemplate>

 

</asp:UpdatePanel>

 

</div>

 

<asp:UpdatePanel ID="updMessage" runat="server" EnableViewState="false" RenderMode="Block">

 

<ContentTemplate>

 

<div id="dvMessage" runat="server" style="display: block; float: left; width: 100%;

 

 

padding: 5px 0 5px 0;">

 

<asp:Label ID="lblMessage" Text="" runat="server"></asp:Label>

 

</div>

 

</ContentTemplate>

 

</asp:UpdatePanel>

 

<div id="dvSearch" style="float: left; min-width: 35%; width: 35%;">

 

<fieldset>

 

<legend>Report Type</legend>

 

<asp:UpdatePanel ID="updSearchTabs" runat="server" RenderMode="Inline">

 

<ContentTemplate>

 

<telerik:RadTabStrip ID="rtsReportType" runat="server" MultiPageID="rmpReportType"

 

SelectedIndex="0">

 

<Tabs>

 

<telerik:RadTab runat="server" Text="GridLoadParameters" Value="LiveMetric">

 

</telerik:RadTab>

 

<telerik:RadTab runat="server" Text="ChamberUtilization" Value="ChamberUtilization">

 

</telerik:RadTab>

 

</Tabs>

 

</telerik:RadTabStrip>

 

</ContentTemplate>

 

</asp:UpdatePanel>

 

<asp:UpdatePanel ID="updSearchTabPages" runat="server" RenderMode="Inline">

 

<ContentTemplate>

 

<telerik:RadMultiPage ID="rmpReportType" runat="server" SelectedIndex="0">

 

<telerik:RadPageView ID="rpvGridLoadParameters" runat="server">

 

<div style="padding: 5px; text-align: left;">

 

<div id="dvcreatedDate" runat="server" style="float: left;">

 

<span style="text-align: left;" class="subheadline" title="Select a RI created date to retrieve metrics data accordingly.">

Metric Calculation Start Date :

 

</span>

 

<telerik:RadDatePicker ID="rdpCreatedDate" runat="server" DateInput-ID="rdicreatedDate"

 

Width="100px">

 

</telerik:RadDatePicker>

 

<asp:RequiredFieldValidator ID="rfvcreatedDate" runat="server" ValidationGroup="createdDate"

 

ControlToValidate="rdpCreatedDate" EnableClientScript="true" ErrorMessage="Please enter a valid RI created date."

 

Display="Dynamic"></asp:RequiredFieldValidator>

 

</div>

 

<br></br>

 

<div id="dvriEnddate" runat="server" style="float: left;">

 

<span style="text-align: left;" class="subheadline" title="Select a RI end date to retrieve metrics data accordingly.">

Metric Calculation End Date :

 

</span>

 

<telerik:RadDatePicker ID="rdpEnddate" runat="server" DateInput-ID="rdiriEnddate"

 

Width="100px">

 

</telerik:RadDatePicker>

 

<asp:RequiredFieldValidator ID="rfvriEnddate" runat="server" ValidationGroup="riEnddate"

 

ControlToValidate="rdpEnddate" EnableClientScript="true" ErrorMessage="Please enter a valid RI end date."

 

Display="Dynamic"></asp:RequiredFieldValidator>

 

</div>

 

<br></br>

 

<div style="display: inline; float: right; clear: right;">

 

<asp:Button ID="btnLoadGrid" Text="Get LiveMetrics" runat="server" />

 

</div>

 

</div>

 

</telerik:RadPageView>

 

<telerik:RadPageView ID="rpvChartLoadParameters" runat="server">

 

<div style="padding: 5px; text-align: left;">

 

<div style="float: left; display: inline;">

 

<div style="display: inline; text-align: left">

 

<span class="subheadline">Equipment : </span>

 

</div>

 

<div style="display: inline; text-align: left">

 

<asp:DropDownList ID="drpEquipment" runat="server" SkinID="smallDropDown">

 

</asp:DropDownList>

 

</div>

 

</div>

 

<div id="Div3" runat="server" style="float: right; display: inline;">

 

<span style="text-align: left;" class="subheadline" title="Select a date to retrieve chamber utilization data accordingly &#13;.">

Scheduled Start Date :

 

</span>

 

<telerik:RadDatePicker ID="rdpScheduledStartdate" runat="server" DateInput-ID="rdiScheduledStartDate"

 

Width="100px">

 

</telerik:RadDatePicker>

 

<asp:RequiredFieldValidator ID="rfvriScheduledStartdate" runat="server" ValidationGroup="ChamberTestsReports"

 

ControlToValidate="rdpSelectedDate" EnableClientScript="true" ErrorMessage="Please enter a valid date."

 

Display="Dynamic"></asp:RequiredFieldValidator>

 

</div>

 

<div id="Div4" runat="server" style="float: right; display: inline;">

 

<span style="text-align: left;" class="subheadline" title="Select a date to retrieve chamber utilization data accordingly &#13;.">

Scheduled End Date :

 

</span>

 

<telerik:RadDatePicker ID="rdpScheduledEnddate" runat="server" DateInput-ID="rdiScheduledEndDate"

 

Width="100px">

 

</telerik:RadDatePicker>

 

<asp:RequiredFieldValidator ID="rfvriScheduledEnddate" runat="server" ValidationGroup="ChamberTestsReports"

 

ControlToValidate="rdpSelectedDate" EnableClientScript="true" ErrorMessage="Please enter a valid date."

 

Display="Dynamic"></asp:RequiredFieldValidator>

 

</div>

 

<div style="display: inline; float: right; clear: right;">

 

<asp:Button ID="btnLoadChart" Text="Get Chamber Utilization" runat="server"

 

ValidationGroup="GetChamberUtilization" />

 

</div>

 

</div>

 

</telerik:RadPageView>

 

</telerik:RadMultiPage>

 

</ContentTemplate>

 

</asp:UpdatePanel>

 

</fieldset>

 

</div>

 

<div class="splitter" style="min-height: 500px;" onclick="javascript:toggle('dvSearch');fnAdjustSectionWidth('dvResult','dvSearch','64%');"

 

title="Click to expand/collapse search pane.">

 

&nbsp;

 

</div>

 

<div id="dvResult" runat="server" style="min-width: 64%; width: 64%; height: 98%;

 

 

float: right;">

 

<fieldset>

 

<legend>Result</legend>

 

<asp:UpdatePanel ID="updReportData" runat="server">

 

<ContentTemplate>

 

<asp:Label ID="lblMetricsInfo" runat="server"></asp:Label></Br>

 

<asp:Label ID="lblMetricsBusinessInfo" runat="server"></asp:Label>

 

<div style="text-align: right">

 

<asp:LinkButton ID="lnkShowAll" Text="Show All" ToolTip="Toggle grid paging" runat="server"

 

CommandName="CurrentGrid" CommandArgument="ReportData"></asp:LinkButton>

 

<asp:ImageButton ID="imgToExcel" runat="server" ImageUrl="../images/excel_16x16.png"

 

AlternateText="Export data to Excel" ToolTip="Export grid data to Excel." Style="width: 16px;

 

 

height: 16px; cursor: pointer;" CommandName="CurrentGrid" CommandArgument="ReportData" />

 

</div>

 

<div class="gridWrapper">

 

<telerik:RadGrid ID="grdReportData" runat="server" PageSize="20" AllowSorting="True"

 

AllowPaging="True" AutoGenerateColumns="True" ShowGroupPanel="True" CssClass="grid"

 

ClientSettings-Resizing-AllowColumnResize="true" ClientSettings-Resizing-ResizeGridOnColumnResize="true"

 

ShowFooter="true">

 

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

 

<GroupPanel Text="">

 

</GroupPanel>

 

<MasterTableView Width="100%" TableLayout="Fixed">

 

<NoRecordsTemplate>

No records exist for the given criteria.

 

</NoRecordsTemplate>

 

</MasterTableView>

 

<ClientSettings AllowGroupExpandCollapse="True" AllowDragToGroup="True">

 

<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="True"></Resizing>

 

</ClientSettings>

 

</telerik:RadGrid>

 

</div>

 

</ContentTemplate>

 

<Triggers>

 

<asp:PostBackTrigger ControlID="imgToExcel" />

 

</Triggers>

 

</asp:UpdatePanel>

 

</fieldset>

 

</div>

 

<div id="dvMetriccharts" runat="server" style="float: right; min-width: 60%; width: 74%;">

 

<fieldset>

 

<legend>Metrics Result Type</legend>

 

<telerik:RadTabStrip ID="rtsResultType" runat="server" MultiPageID="rmpResult" SelectedIndex="0">

 

<Tabs>

 

<telerik:RadTab runat="server" Text="ChamberUtilization" Value="ChamberUtilization">

 

</telerik:RadTab>

 

</Tabs>

 

</telerik:RadTabStrip>

 

<asp:Label ID="lblAvgDisplay" Text="" runat="server" text-align="center"></asp:Label>

 

<telerik:RadMultiPage ID="rmpChartType" runat="server" SelectedIndex="0">

 

<telerik:RadPageView ID="rpvChamberUtilization" runat="server">

 

<div style="padding: 5px; text-align: left;">

 

<asp:Button Visible="True" ID="btnChamberUtilization" Text="ResetZoomOut" ToolTip="Save changes"

 

runat="server" OnClientClick="ZoomOutPostTestTimeliness(); return false;" />

 

<asp:UpdatePanel ID="updChamberUtilization" runat="server" RenderMode="Inline" UpdateMode="Conditional">

 

<ContentTemplate>

 

<telerik:RadChart AutoLayout="True" Height="450px" ID="rcchart" runat="server"

 

Skin="WebBlue" DefaultType="Line" Width="935px">

 

<ClientSettings EnableZoom="True" ScrollMode="Both" />

 

<Appearance>

 

<FillStyle MainColor="249, 250, 251">

 

</FillStyle>

 

<Border Color="160, 170, 182" />

 

</Appearance>

 

<Series>

 

<telerik:ChartSeries Name="DevSeries">

 

<Appearance>

 

<FillStyle FillType="ComplexGradient" MainColor="94, 117, 142">

 

<FillSettings>

 

<ComplexGradient>

 

<telerik:GradientElement Color="94, 117, 142" />

 

<telerik:GradientElement Color="116, 138, 162" Position="0.5" />

 

<telerik:GradientElement Color="139, 160, 183" Position="1" />

 

</ComplexGradient>

 

</FillSettings>

 

</FillStyle>

 

<TextAppearance TextProperties-Color="140, 140, 140">

 

</TextAppearance>

 

<Border Color="73, 86, 101" />

 

</Appearance>

 

</telerik:ChartSeries>

 

<telerik:ChartSeries Name="ProdSeries">

 

<Appearance>

 

<FillStyle FillType="ComplexGradient" MainColor="164, 175, 187">

 

<FillSettings>

 

<ComplexGradient>

 

<telerik:GradientElement Color="164, 175, 187" />

 

<telerik:GradientElement Color="196, 203, 212" Position="0.5" />

 

<telerik:GradientElement Color="221, 226, 233" Position="1" />

 

</ComplexGradient>

 

</FillSettings>

 

</FillStyle>

 

<TextAppearance TextProperties-Color="140, 140, 140">

 

</TextAppearance>

 

<Border Color="144, 150, 159" />

 

</Appearance>

 

</telerik:ChartSeries>

 

</Series>

 

<Legend Visible="False">

 

<Appearance Dimensions-Margins="1%, 1%, 1px, 1px" Dimensions-Paddings="1px, 1px, 1px, 1px"

 

Position-AlignedPosition="bottom" Visible="False">

 

<ItemTextAppearance TextProperties-Color="102, 102, 102">

 

</ItemTextAppearance>

 

<FillStyle MainColor="216, 222, 227">

 

</FillStyle>

 

<Border Color="160, 170, 182" />

 

</Appearance>

 

</Legend>

 

<PlotArea>

 

<YAxis AutoScale="True" AxisMode="Extended">

 

<Appearance>

 

<MajorGridLines Color="227, 227, 227" />

 

<MinorGridLines Color="227, 227, 227" />

 

<TextAppearance AutoTextWrap="False" />

 

</Appearance>

 

<AxisLabel>

 

<TextBlock>

 

<Appearance TextProperties-Color="140, 140, 140" Position-AlignedPosition="TopLeft">

 

</Appearance>

 

</TextBlock>

 

</AxisLabel>

 

</YAxis>

 

<XAxis AutoScale="True" DataLabelsColumn="RIID's" MaxValue="0" Step="0">

 

<Appearance>

 

<MajorGridLines Color="227, 227, 227" Width="0" />

 

<TextAppearance AutoTextWrap="True" />

 

</Appearance>

 

<AxisLabel>

 

<TextBlock>

 

<Appearance TextProperties-Color="140, 140, 140" Position-AlignedPosition="BottomRight">

 

</Appearance>

 

</TextBlock>

 

</AxisLabel>

 

</XAxis>

 

<Appearance>

 

<FillStyle FillType="Solid" MainColor="">

 

</FillStyle>

 

</Appearance>

 

</PlotArea>

 

<ChartTitle>

 

<Appearance>

 

<FillStyle MainColor="">

 

</FillStyle>

 

</Appearance>

 

<TextBlock Text="PostTest Timeliness">

 

<Appearance TextProperties-Color="102, 102, 102" TextProperties-Font="Arial, 7pt"

 

Position-AlignedPosition="Bottom">

 

</Appearance>

 

</TextBlock>

 

</ChartTitle>

 

</telerik:RadChart>

 

</ContentTemplate>

 

</asp:UpdatePanel>

 

</div>

 

</telerik:RadPageView>

 

</telerik:RadMultiPage>

 

</fieldset>

 

</div>

</

 

 

asp:Content>








ASPX.VB:


Imports

 

 

System.Web

Imports

 

 

System.Web.UI.WebControls

Imports

 

 

System.Data

Imports

 

 

Telerik.Web.UI

Imports

 

 

System.Globalization

Partial

 

 

Class forms_Reports

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

lblMessage.Text =

 

String.Empty

lblMetricsInfo.Text =

 

String.Empty

lblMetricsBusinessInfo.Text =

 

String.Empty

 

End Sub

#Region

 

 

"GetLive Metric"

 

Protected Sub btnGetChamberUtilization_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnLoadChart.Click

 

Dim strerrorMessage As String = String.Empty

 

Dim ds As DataSet

grdReportData.DataSource =

 

Nothing

ds =

 

Object.AdonetSP(CType(rdpScheduledStartdate.SelectedDate, Date), CType(rdpScheduledEnddate.SelectedDate, Date), "", strerrorMessage)

 

If Not ds Is Nothing Then

rcchart.Clear()

rcchart.DataSource = ds.Tables.Item(0)

rcchart.DataBind()

rcchart.Series(0).DataXColumn =

 

"XAxisDatabaseColumn"

rcchart.Series(0).DataYColumn =

 

"YAxisDatabaseColumn"

 

'Need to handle the series(1) for the other results

 

'rcchart.Series(1).DataXColumn = "XAxisDatabaseColumn"

 

'rcchart.Series(1).DataYColumn = "YAxisDatabaseColumn"

　

rcchart.PlotArea.XAxis.AxisLabel.TextBlock.Text =

 

"XAxis Name"

rcchart.PlotArea.XAxis.AxisLabel.Visible =

 

True

rcchart.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.

 

Color.Red

rcchart.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.Position.Auto =

 

True

rcchart.PlotArea.YAxis.AxisLabel.Visible =

 

True

rcchart.PlotArea.YAxis.AxisLabel.TextBlock.Text =

 

"YAxis Name"

rcchart.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.

 

Color.Red

rcchart.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.Position.Auto =

 

True

rcchart.Legend.Visible =

 

False

 

End If

 

End Sub

 

Protected Sub btnLiveMetrics_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnLoadGrid.Click

 

Dim strerrorMessage As String = String.Empty

 

Dim ds As DataSet

lblMessage.Text =

 

String.Empty

 

'Showing the message on Result Panel.

lblMetricsInfo.Text =

 

"All timeliness metrics in days."

lblMetricsBusinessInfo.Text =

 

"For events not completed, today's date is assumed for calculating live metrics."

grdReportData.DataSource =

 

Nothing

ds =

 

Object.adonetsp(CType(rdpCreatedDate.SelectedDate, Date), CType(rdpEnddate.SelectedDate, Date), Nothing, "True", strerrorMessage)

 

'binding the metrics table

 

If Not ds Is Nothing Then

grdReportData.DataSource = ds

grdReportData.DataBind()

 

End If

 

End Sub

End

 

 

Class

1 Answer, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 03 Sep 2012, 10:47 AM
Hello,

The code shows that RadChart.DataSource is assigned and immediately RadChart.DataBind method is called. And then -- all the necessary configurations are performed. Unfortunately, the would not be applied as the chart items have already been produced during databinding. Please, move the call to DataBind method to the end of btnGetChamberUtilization_Click, so that the chart is fully configured before databinding it.

Best regards,
Ves
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.
Tags
Chart (Obsolete)
Asked by
Satish
Top achievements
Rank 1
Answers by
Ves
Telerik team
Share this question
or