Place a Chart on at a specific RadTabStrip Tab - asp.net

Question

What i'm trying to do is place a specific chart that is dynamically created on a specific tab. For example Chart A will go to ColorTab and Chart B will go to HistoryTab
<telerik:RadAjaxPanel ID="StripPanel" runat="server" Width="100%">
<telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="Monetary" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="MonetaryTab">
</telerik:RadTab>
<telerik:RadTab Text="VTab">
</telerik:RadTab>
<telerik:RadTab Text="ColorTab">
</telerik:RadTab>
<telerik:RadTab Text="HistoryTab">
</telerik:RadTab>
<telerik:RadTab Text="AdTab">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
</telerik:RadAjaxPanel>
This is what i'm trying
Control masterC = FindControl("MonetaryTab");
RadHtmlChart CarLotChart = ChartCreationClass.HTMLChartCreation();
masterC.Controls.Add(CarLotChart);
It never finds the control to place the chart.

Answer 1

Use recommendations from this thread to accomplish this task:
RadHtmlChart CarLotChart = ChartCreationClass.HTMLChartCreation();
TabStrip.Tabs["MonetaryTab"].Controls.Add(CarLotChart);
Refer to the required Tab via any of the following methods.

Answer 2

The RadTabStrip works in conjuction with RadmultiPage control. You first define the RafTabStrip and Tabs within it. Then have a RadMultiPage and define one page (type RadPageView) for each tab you have defined in TabStrip. The controls need to be added to the PageView and not to the tab directly.
I have created a small demo based on the TabStrip you have defined in the question.
Here is the TabStrip code:
<telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="Monetary" SelectedIndex="0" >
<Tabs>
<telerik:RadTab Text="MonetaryTab">
</telerik:RadTab>
<telerik:RadTab Text="VTab">
</telerik:RadTab>
<telerik:RadTab Text="ColorTab">
</telerik:RadTab>
<telerik:RadTab Text="HistoryTab">
</telerik:RadTab>
<telerik:RadTab Text="AdTab">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
Now here is the RadMultiPage definition:
<telerik:RadMultiPage ID="Monetary" runat="server" SelectedIndex="0" OnLoad="Monetary_Load">
<telerik:RadPageView runat="server" ID="monetaryTabPageView"/>
<telerik:RadPageView runat="server" ID="vTabPageView"/>
<telerik:RadPageView runat="server" ID="colorTabPageView"/>
<telerik:RadPageView runat="server" ID="historyTabPageView"/>
<telerik:RadPageView runat="server" ID="adTabPageView"/>
</telerik:RadMultiPage>
Notice that i am listening to OnLoad event of the RadMultiPage. In this demo - when the RadMultiPage loads, i will create charts and add it to eacg pageview we have. Here is the event handler code:
protected void Monetary_Load(object sender, EventArgs e)
{
AddChart(monetaryTabPageView);
AddChart(vTabPageView);
AddChart(colorTabPageView);
AddChart(historyTabPageView);
AddChart(adTabPageView);
}
private void AddChart(RadPageView pageView)
{
RadHtmlChart chart = new RadHtmlChart();
chart.ChartTitle.Text = pageView.ID + " chart";
pageView.Controls.Add(chart);
}
As you can see i just add the control directly to the pageview's controls collection.
NOTE: as a proof of concept i have created an empty chart i.e. a chart which has only title defined. you can go ahead and bind with some meaningful data if required.
here is the screenshot of how this looks:
Hope this answers your question.
Lohith (Tech Evangelist, Telerik India)