Embedding RadChart in RadGrid

Thread is closed for posting
4 posts, 0 answers
  1. Karl Rohrbach
    Karl Rohrbach avatar
    20 posts
    Member since:
    Oct 2009

    Posted 15 Feb 2010 Link to this post

    I hope someone has come up with a similar solution.  I have a three RadCharts that are in a NestedViewTemplate (ExpandCollapse).  I also have grid grouping items in the footer.  For some reason, The RadCharts are not accessible in the code behind if they are in the RadGrid.  Any insight would be greatly appreciated.  If the RadCharts are outside of the RadGrid, the control is available in the code behind.  Thanks in advance.

    Here is the RadGrid block ( removed 2 charts ):  

     
              
     
        <telerik:RadGrid ID="ActiveItem" runat="server" AllowSorting="False" AllowMultiRowSelection="False" AllowPaging="False" ShowGroupPanel="False" 
                AutoGenerateColumns="False" ClientSettings-AllowGroupExpandCollapse="true" OnPreRender="ActiveItem_PreRender" OnItemDataBound="ActiveItem_ItemDataBound" GroupHeaderItemStyle-BackColor="#CCCCCC">  
                <PagerStyle Mode="NumericPages"></PagerStyle> 
                <MasterTableView Width="100%" ShowGroupFooter="true" CellSpacing="1" GroupLoadMode="Server">  
                <Columns> 
            <telerik:GridBoundColumn DataField="ID" Visible="false"></telerik:GridBoundColumn> 
            <telerik:GridTemplateColumn DataField="ID" HeaderText="View" ItemStyle-Width="30px" HeaderStyle-Width="30px"  ItemStyle-HorizontalAlign="Right" ShowSortIcon="false" HeaderStyle-HorizontalAlign="Center" UniqueName="DetailsView" HeaderStyle-Font-Bold="true" HeaderStyle-Wrap="false">  
                <ItemTemplate> 
                <href="details.aspx?KB=<%# DataBinder.Eval(Container.DataItem, "ID") %>"><img src="/Images/icon_view.gif" width="16" height="16"  style="border: 0px" /></a>  
                </ItemTemplate> 
            </telerik:GridTemplateColumn>              
                </Columns> 
                    <DetailTables> 
                        <telerik:GridTableView runat="server" Width="100%" Name="Performance" AutoGenerateColumns="false">                                              
                            <nestedviewsettings> 
                                <parenttablerelation> 
                                    <telerik:GridRelationFields DetailKeyField="ID" /> 
                                </parenttablerelation> 
                            </nestedviewsettings> 
                            <nestedviewtemplate> 
                                <asp:Panel ID="NestedViewPanel" runat="server" CssClass="viewWrap">  
                                    <div> 
                                        <fieldset style="padding: 5px; margin: -5px 10px 5px 10px;">  
                                            <legend style="padding: 10px; font-weight: bold; color: #666666;">Bulletin Performance: </legend> 
                                            <div class="contactWrap" > 
                                              
    <!-- RAD CHARTS -->                                              
     
     
     
    <!-- CHART 1 START - PERFORMANCE --> 
     
    <table cellpadding="0" cellspacing="0" border="0" width="750px" style="margin-top: 20px;">  
    <tr> 
    <td width="200px" valign="top" align="center">  
     
    <asp:Label runat="server" ID="ChartLabel" Font-Bold="true" ForeColor="#666666" Font-Size="13px"></asp:Label> 
     
    <telerik:RadChart ID="PerformanceChart" runat="server" DefaultType="Pie"   
            Width="150px" AutoTextWrap="true" BorderWidth="0px"   
            ChartTitle-Appearance-Visible="false" Legend-Appearance-Visible="false"   
            Height="150px" SeriesPalette="Palette1" UseSession="true" ViewStateMode="Enabled" OnItemDataBound="ConvertToPercentage">  
       <Appearance Dimensions-Width="200px" Dimensions-Margins="0px, 0px, 0px, 0px"   
            Dimensions-Paddings="0px, 0px, 0px, 0px">  
        <FillStyle MainColor="Transparent" FillType="Solid"></FillStyle> 
        <Border Color="Transparent" Width="0" Visible="False"></Border> 
        </Appearance> 
        <CustomPalettes> 
            <telerik:Palette Name="Palette1">  
                <Items> 
                    <telerik:PaletteItem MainColor="#AAAAAA" SecondColor="#AAAAAA"></telerik:PaletteItem> 
                    <telerik:PaletteItem MainColor="#FFCC00" SecondColor="#FFCC00"></telerik:PaletteItem> 
                </Items> 
            </telerik:Palette> 
        </CustomPalettes> 
    <Series> 
    <telerik:ChartSeries Name="Series1" Type="Pie">  
    <Items> 
        <telerik:ChartSeriesItem Name="ParticpationVal"><Appearance Border-Visible="false"></Appearance></telerik:ChartSeriesItem> 
        <telerik:ChartSeriesItem Name="ParticpationDiff"><Appearance Border-Visible="false"></Appearance></telerik:ChartSeriesItem> 
    </Items> 
    <Appearance> 
    <FillStyle MainColor="#000000" FillType="Solid"></FillStyle> 
    <TextAppearance TextProperties-Color="Black"></TextAppearance> 
    <Border Color="Transparent"></Border> 
    </Appearance> 
    </telerik:ChartSeries> 
    </Series> 
    <Legend Visible="False">  
    <Appearance Visible="False" Position-AlignedPosition="TopRight" Dimensions-Margins="1px, 1px, 1px, 1px" Dimensions-Paddings="1px, 1px, 1px, 1px">  
    <ItemTextAppearance TextProperties-Color="Black"></ItemTextAppearance> 
    <ItemMarkerAppearance Figure="Square"></ItemMarkerAppearance> 
    <Border Color="Transparent" Visible="False"></Border> 
    </Appearance> 
        <TextBlock> 
            <Appearance> 
                <Border Visible="False" Width="0" /> 
            </Appearance> 
        </TextBlock> 
    </Legend> 
    <PlotArea> 
        <DataTable> 
            <Appearance DrawHorizontalLines="False" DrawLines="False"   
                DrawVerticalLines="False" Border-Visible="false">  
                <Border Width="0" /> 
            </Appearance> 
        </DataTable> 
    <XAxis> 
    <Appearance Color="Black" MajorTick-Color="Black" Width="0" TextAppearance-TextProperties-Color="Black" /> 
    <AxisLabel> 
        <Appearance> 
            <Border Color="Transparent" Visible="False" Width="0" /> 
        </Appearance> 
    </AxisLabel> 
    </XAxis> 
    <YAxis> 
    <Appearance Color="Black" MinorTick-Color="Black" MajorTick-Color="Black" Width="0">  
    <MajorGridLines Color="Black"></MajorGridLines> 
    <MinorGridLines Color="Black"></MinorGridLines> 
        <LabelAppearance> 
            <Border Color="Transparent" Width="0" /> 
        </LabelAppearance> 
    <TextAppearance TextProperties-Color="Black"></TextAppearance> 
    </Appearance> 
        <AxisLabel> 
            <Appearance> 
                <Border Visible="False" Width="0" /> 
            </Appearance> 
            <TextBlock> 
                <Appearance> 
                    <Border Width="0" /> 
                </Appearance> 
            </TextBlock> 
        </AxisLabel> 
    </YAxis> 
    <Appearance Dimensions-Margins="0%, 0%, 0%, 0%"   
            Dimensions-Paddings="0px, 0px, 0px, 0px" Position-Auto="False" Position-X="0"   
            Position-Y="0">  
    <FillStyle MainColor="Transparent" FillType="Solid" SecondColor="Transparent"></FillStyle> 
    <Border Color="Transparent" Visible="False" Width="0"></Border> 
        <Shadow Color="Transparent" /> 
    </Appearance> 
    </PlotArea> 
    <ChartTitle Visible="False">  
    <Appearance Visible="False">  
    <FillStyle MainColor=""></FillStyle> 
    </Appearance> 
    <TextBlock> 
    <Appearance TextProperties-Font="Arial, 18pt" TextProperties-Color="Black"></Appearance> 
    </TextBlock> 
    </ChartTitle> 
        </telerik:RadChart> 
    <!-- CHART 1 END - PERFORMANCE --> 
     
    </td> 
    </tr> 
    </table> 
     
     
     
    <!-- RAD CHARTS --> 
                                            </div> 
                                        </fieldset> 
                                    </div> 
                                </asp:Panel> 
                            </nestedviewtemplate> 
                            <expandcollapsecolumn visible="True">  
                            </expandcollapsecolumn> 
                        </telerik:GridTableView>                  
                    </DetailTables> 
     
                     <GroupByExpressions> 
                        <telerik:GridGroupByExpression> 
                            <SelectFields> 
                                <telerik:GridGroupByField FieldAlias="Release" FieldName="Release_Date" FormatString="{0:D}" 
                                    HeaderValueSeparator=": "></telerik:GridGroupByField> 
                            </SelectFields> 
                            <GroupByFields> 
                                <telerik:GridGroupByField FieldName="Release_Date" SortOrder="Ascending"></telerik:GridGroupByField> 
                            </GroupByFields> 
                        </telerik:GridGroupByExpression> 
                    </GroupByExpressions> 
     
                </MasterTableView> 
            </telerik:RadGrid> 
            <br /> 
            <!-- content end --> 


       

  2. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 18 Feb 2010 Link to this post

    Hello Karl,

    You cannot directly refer to controls inside templates by their ID. You need to get the container and call its FindControl method. In this case you can wire ItemDataBound event of RadGrid, check if the current item is GridNestedViewItem and find the chart within:

    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridNestedViewItem)
            {
                RadChart chart = e.Item.FindControl("RadChart1") as RadChart;
                // deal with RadChart here
            }
        }

    Regards,
    Ves
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Karl Rohrbach
    Karl Rohrbach avatar
    20 posts
    Member since:
    Oct 2009

    Posted 24 Feb 2010 Link to this post

    Hi Ves,

    Thanks for your help.  I was able to load the charts successfully using OnItemDatabound.  Is there any way that I can do this with OnItemCommand to only retrieve the data when a user expands the row?  Each row in my grid contains three charts that pulls a lot of data.  So OnItemDatabound makes the page take forever to load. 

    Is OnItemCommand the method to use for this scenario?  How would I retrieve the DetailKeyField in my GridRelationFields?  As always, thanks for your help. 


    As an example, the following code [snip] does not fire
    <telerik:RadGrid ID="BulletinActive" runat="server" AutoGenerateColumns="False" OnPreRender="BulletinActive_PreRender" OnItemDataBound="BulletinActive_ItemDataBound" GroupHeaderItemStyle-BackColor="#BBBBBB" OnItemCommand="ShowPerformanceCharts">  
        <PagerStyle Mode="NumericPages"></PagerStyle> 
        <MasterTableView Width="100%" ShowGroupFooter="true" CellSpacing="1" DataKeyNames="ID" HierarchyLoadMode="Client">  
        <NestedViewSettings><ParentTableRelation><telerik:GridRelationFields DetailKeyField="ID" /></ParentTableRelation></NestedViewSettings> 
         <NestedViewTemplate> ... 

    protected void ShowPerformanceCharts(object sender, Telerik.Web.UI.GridCommandEventArgs e)  
            {  
                if (e.CommandName == RadGrid.ExpandCollapseCommandName)  
                {  
                    if (e.Item is GridDataItem)  
                    {  
                        dataItem = (GridDataItem)e.Item.DataItem;  
                        KB = (string)dataItem.GetDataKeyValue("ID");  
     



  4. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 01 Mar 2010 Link to this post

    Hi Karl Rohrbach,

    After ItemCommand is fired the grid is databound and its items are re-created. So, even if you have found and configured the chart in ItemCommand event handler, you would not see any result. Please, find more details about RadGrid event sequence in this help topic.

    I have attached a small example, showing this scenario -- when the code for the chart placed in if (e.Item is GridNestedViewItem) only a single chart is configured at a time. Note, that I have left the HierarchyLoadMode to its default value - ServerOnDemand. When this is set to Client you get all the items databound on initial load. This is the reason for your code not being fired when expanding items - expanding is done client side - no server processing.

    Regards,
    Ves
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top