I would like to add pie-chart to one of the sub levels. Ideally i would like to add tab control with multiple charts.
i tried bunch of stuff with no luck
Please take a look at the current state (before.jpg) and desired (after.png)
Thank you
21 Answers, 1 is accepted
I would recommend you to examine the following live example which demonstrates how to use char in a NestedViewTemplate of the grid. The chart could be found in the Static Chart tab.
Regards,
Kostadin
Telerik
See What's Next in App Development. Register for TelerikNEXT.
That looks like exactly what i need!
Thank you Kostadin
Upon further examination this example is not perfect for my situation because i want to build template on top of detail table.
In this case implementation seems much more tricky and convoluted.
Can you recommend approach that will achieve similar behavior to the link you provided, but for "detail" table couple of levels down?
You can add as many detail tables and on each one you can specify a NestedViewTemplate. For instance if you have a two level hierarchy and the third level you need to show the pie chart then you can use the following structure.
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
>
<
MasterTableView
Name
=
"master"
>
<
DetailTables
>
<
telerik:GridTableView
Name
=
"detail"
>
<
NestedViewTemplate
>
</
NestedViewTemplate
>
</
telerik:GridTableView
>
If you your requirement differs can you please provide more details on your scenario?
Regards,
Kostadin
Telerik
Kostadin,
Ultimately i used your approach successfully and looks and works great. However, i can't export the tab (NestedViewTemplate) content. Any pointers?
Thank you
David
Note that not all of the export formats support exporting of the NestedViewTemplate. Generally you can export the grid to Excel when using HTML based export format or PDF.
Regards,
Kostadin
Telerik
Kostadin,
I have my excel export setup as
<asp:ImageButton ID="ibExcel_EconomicImpact" runat="server"
ImageUrl="graphics/excel.png" tooltip="Export to xsl"
style="margin-top:7px; margin-left:30px;"
OnClick="Export_Click" AlternateText="HTML"/>
However my nested view does not export correctly.
Please see attached files
Note that the required functionality is not supported and this can not be achieved out of the box. It is not possible to add random content of some place holder in a cell of Excel.
Regards,
Maria Ilieva
Telerik
How about ability to export first tab(Details) which is a grid.
That should be possible, right? Just in case this is a code for a grid
<telerik:RadPageView runat="server" ID="rpvTotalByIndustry" >
<telerik:RadGrid ID="grd4c" runat="server" ShowStatusBar="true" AutoGenerateColumns="False"
Width="1190px" skin="WebBlue" style="margin-top:5px;"
AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="false"
OnDetailTableDataBind="DetailTableDataBind"
OnNeedDataSource="NeedDataSource">
<PagerStyle Mode="NumericPages"></PagerStyle>
<MasterTableView DataKeyNames="RegionID" HeaderStyle-Font-Bold="true">
<DetailTables>
<telerik:GridTableView DataKeyNames="RegionID,DataYear" Name="Years"
Width="100%" HeaderStyle-Font-Bold="true">
<HeaderStyle CssClass="InnerHeaderStyle" />
<ItemStyle CssClass="InnerItemStyle" />
<AlternatingItemStyle CssClass="InnerAlernatingItemStyle" />
<NestedViewTemplate>
<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">
<telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1"
skin="Default" SelectedIndex="0"
style="background-color:#d0d7e5;">
<Tabs>
<telerik:RadTab runat="server" Text="Details" PageViewID="PageView1"/>
<telerik:RadTab runat="server" Text="Business Output" PageViewID="PageView2"/>
<telerik:RadTab runat="server" Text="Value Added" PageViewID="PageView3"/>
<telerik:RadTab runat="server" Text="Jobs" PageViewID="PageView4"/>
<telerik:RadTab runat="server" Text="Wage Income" PageViewID="PageView5"/>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
<telerik:RadPageView runat="server" ID="PageView1">
<asp:Label ID="lblRegion" Font-Bold="true" Font-Italic="true" Text='<%# Eval("RegionID") %>'
Visible="false" runat="server"></asp:Label>
<asp:Label ID="lblDataYear" Font-Bold="true" Font-Italic="true" Text='<%# Eval("DataYear") %>'
Visible="false" runat="server"></asp:Label>
<telerik:RadGrid runat="server" ID="grdYearDetails_4c"
OnItemCommand="RadGrid1_ItemCommand" skin="Office2010Silver"
AllowSorting="true" EnableLinqExpressions="false">
<MasterTableView ShowHeader="true" AutoGenerateColumns="False">
<Columns>
<telerik:GridBoundColumn HeaderText="NAICS" HeaderButtonType="TextButton"
SortExpression="NAICSrange" DataField="NAICSrange"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Industry" HeaderButtonType="TextButton"
SortExpression="IndustryName" DataField="IndustryName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Business Output" HeaderButtonType="TextButton"
SortExpression="Output" DataField="Output" DataFormatString="{0:N5}"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Value Added" HeaderButtonType="TextButton"
SortExpression="ValueAdded" DataField="ValueAdded" DataFormatString="{0:N5}"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Jobs" HeaderButtonType="TextButton"
SortExpression="Employment" DataField="Employment"
ItemStyle-Width="110px" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:N0}"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Wage Income" HeaderButtonType="TextButton"
SortExpression="Income" DataField="Income" DataFormatString="{0:N5}"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="PageView2">
<telerik:RadHtmlChart runat="server" ID="pieBusinessOutput" Width="1000px" Height="400px"
Transitions="true">
<ChartTitle Text="Long Term Economic Impact - Business Output">
<Appearance Align="Center" Position="Top">
<TextStyle Bold="true" />
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="Right" Visible="true"></Appearance>
</Legend>
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="140"
DataFieldY="Output" NameField="IndustryName">
<LabelsAppearance Position="OutsideEnd">
</LabelsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPage3">
<telerik:RadHtmlChart runat="server" ID="pieValueAdded" Width="1000px" Height="400px"
Transitions="true">
<ChartTitle Text="Long Term Economic Impact - Value Added">
<Appearance Align="Center" Position="Top">
<TextStyle Bold="true" />
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="Right" Visible="true"></Appearance>
</Legend>
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="140"
DataFieldY="ValueAdded" NameField="IndustryName">
<LabelsAppearance Position="OutsideEnd">
</LabelsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPage4">
<telerik:RadHtmlChart runat="server" ID="pieJobs" Width="1000px" Height="400px"
Transitions="true">
<ChartTitle Text="Long Term Economic Impact - Jobs">
<Appearance Align="Center" Position="Top">
<TextStyle Bold="true" />
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="Right" Visible="true"></Appearance>
</Legend>
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="140"
DataFieldY="Employment" NameField="IndustryName">
<LabelsAppearance Position="OutsideEnd">
</LabelsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPage5">
<telerik:RadHtmlChart runat="server" ID="pieWageIncome" Width="1000px" Height="400px"
Transitions="true">
<ChartTitle Text="Long Term Economic Impact - Wage Income">
<Appearance Align="Center" Position="Top">
<TextStyle Bold="true" />
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="Right" Visible="true"></Appearance>
</Legend>
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="140"
DataFieldY="Income" NameField="IndustryName">
<LabelsAppearance Position="OutsideEnd">
</LabelsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</telerik:RadPageView>
</telerik:RadMultiPage>
</asp:Panel>
</NestedViewTemplate>
<%-- <DetailTables>
<telerik:GridTableView Name="YearDetails" Width="100%" HeaderStyle-Font-Bold="true">
<Columns>
<telerik:GridBoundColumn HeaderText="NAICS" HeaderButtonType="TextButton"
SortExpression="NAICSrange" DataField="NAICSrange"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Industry" HeaderButtonType="TextButton"
SortExpression="IndustryName" DataField="IndustryName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Business Output" HeaderButtonType="TextButton"
SortExpression="Output" DataField="Output" DataFormatString="{0:N5}"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Value Added" HeaderButtonType="TextButton"
SortExpression="ValueAdded" DataField="ValueAdded" DataFormatString="{0:N5}"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Jobs" HeaderButtonType="TextButton"
SortExpression="Employment" DataField="Employment"
ItemStyle-Width="110px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Wage Income" HeaderButtonType="TextButton"
SortExpression="Income" DataField="Income" DataFormatString="{0:N5}"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>--%>
<Columns>
<telerik:GridBoundColumn HeaderText="Data Year" HeaderButtonType="TextButton"
SortExpression="DataYear" DataField="DataYear"
ItemStyle-Width="120px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="RegionID" HeaderText="RegionID" HeaderButtonType="TextButton"
DataField="RegionID" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Business Output" HeaderButtonType="TextButton"
SortExpression="Output" DataField="Output" DataFormatString="{0:N3}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Value Added" HeaderButtonType="TextButton"
SortExpression="ValueAdded" DataField="ValueAdded" DataFormatString="{0:N3}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Jobs" HeaderButtonType="TextButton"
SortExpression="Employment" DataField="Employment" DataFormatString="{0:N0}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Wage Income" HeaderButtonType="TextButton"
SortExpression="Income" DataField="Income" DataFormatString="{0:N3}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="" DataField="SpaceHolder" UniqueName="SpaceHolder"
HeaderButtonType="TextButton">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="RegionID" HeaderText="RegionID" HeaderButtonType="TextButton"
DataField="RegionID" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Region Name" HeaderButtonType="TextButton"
SortExpression="RegionName" DataField="RegionName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Business Output" HeaderButtonType="TextButton"
SortExpression="Output" DataField="Output" DataFormatString="{0:N3}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Value Added" HeaderButtonType="TextButton"
SortExpression="ValueAdded" DataField="ValueAdded" DataFormatString="{0:N3}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Jobs" HeaderButtonType="TextButton"
SortExpression="Employment" DataField="Employment"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:N0}"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Wage Income" HeaderButtonType="TextButton"
SortExpression="Income" DataField="Income" DataFormatString="{0:N3}"
ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Right"
HeaderStyle-HorizontalAlign="Right">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadPageView>
You can achieve the required functionality by using the default Excel ExportFormat (HTML) and by setting the IgnorePaging property to "false".
Give this a try and see if it works for you.
Regards,
Maria Ilieva
Telerik
Maria,
It does work, but also prints names of nested template tubs (see attached).
Any solution?
Thank you
David
You can use the approach below to hide the tabs:
protected
void
RadGrid1_ItemCommand(
object
source, GridCommandEventArgs e)
{
if
(e.CommandName == RadGrid.ExportToExcelCommandName)
{
foreach
(GridNestedViewItem nestedViewItem
in
RadGrid1.MasterTableView.GetItems(GridItemType.NestedView))
{
nestedViewItem.FindControl(
"TabStip1"
).Visible =
false
;
}
}
}
I hope this helps.
Regards,
Maria Ilieva
Telerik
Maria,
It is interesting approach, but this piece of code is not called when i export my grid.
grd4c.MasterTableView.ExportToCSV()
As I mentioned in some of my previous posts the required export can only be achieved by using the default Excel ExportFormat (HTML) and not other export formats. therefore the export to CSV will not be possible with this configuration.
Regards,
Maria Ilieva
Telerik
Sorry, i pasted wrong line accidentally. My point however still stands, RadGrid1_ItemCommand is not getting called when i run
grid.ExportSettings.Excel.Format = GridExcelExportFormat.Html
grid.MasterTableView.ExportToExcel()
I have tested the presented code in the online demo below by adding export functionality and the ItemCommand logic and it behaves as expected:
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx
Can you please verify if any errors appear on your end that might prevent the event to fire or if the Ajax is enabled for the RadGrid control.
Regards,
Maria Ilieva
Telerik
Can you attach resulted exports, please? Also, can you export graph as well?
Thank you
Find attached the exported file.
Regards,
Maria Ilieva
Telerik
Note that this result is expected since we cannot remove the controls from the Excel document because the information in the template might vary. What I can suggest you is to remove all the controls manually when export command is fired. For instance you can disable the paging, filtering, commandItem etc. to both the inner and the outer table which will remove the buttons from the exported document.
Regards,
Kostadin
Telerik