Issues With Chart and Grid Binding

Thread is closed for posting
2 posts, 0 answers
  1. Satish
    Satish avatar
    10 posts
    Member since:
    Apr 2012

    Posted 29 Aug 2012 Link to this post

    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

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 03 Sep 2012 Link to this post

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