Embedding RadChart in RadGrid

[Karl Rohrbach]

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>
            <a 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 -->

   

[Ves]

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.

[Karl Rohrbach]

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");

[Ves]

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.