Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] UserControl in a Radpane

1 Answer 258 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
jdgoulden
Top achievements
Rank 1
jdgoulden asked on 19 Feb 2008, 04:11 AM
I have a UserControl that contains a Prometheus RadChart inside of it, that is loaded dynamically when a user drags a TreeNode from a RadTreeView. The UserControl is inside of the right side of a RadSplitter while the Tree is on the left. When the UserControl is created it is displayed over the top of the TreeView's pane. Changing the Z-index and the relative position inside of the css doesn't seem to have any effect, am I missing something?

The code for the Default Webpage is :

<body style="height:100%;width:100%;margin:0px;padding:0; overflow: hidden;">

<form id="form1" runat="server" style="width:100%;height:100%;margin:0;border-spacing:0;overflow:hidden;">

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

<telerik:RadScriptManager ID="RadScriptManager" runat="server"

EnablePageMethods="True">

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

height="100%" MinDisplayTime="1000" width="100%">

<img alt="Loading..." src="Images\loading.gif"

style="border-style: none; border-color: inherit; border-width: 0px; height: 65px; width: 121px; vertical-align: middle; text-align: center;" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="PerformanceTreeView">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadSplitter ID="HeaderSplitter" runat="server" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="true" Height="100%" Width="100%" ResizeMode="AdjacentPane" FullScreenMode="True" Skin="Vista" Scrolling="Node">

<telerik:RadPane ID="HeaderRadPane" runat="server" Scrolling="None" Height="22px">

<telerik:RadSlidingZone ID="HeaderSlideZone" runat="server" Scrolling="None" Height="18px">

<telerik:RadSlidingPane ID="HeaderSlidePane" runat="server" Height="120px" Scrolling="None" Title="Home" Width="282px">

<fpi:FPIHeader ID="PageHeaderControl" runat="server" />

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="PageSplitterBar" runat="server"/>

<telerik:RadPane ID="DataPane" runat="server" Scrolling="None">

<telerik:RadSplitter ID="DataPaneSplitter" Runat="server" ResizeWithParentPane="true" Height="100%" Items-Capacity="0" Orientation="Vertical" ResizeMode="AdjacentPane" Skin="Vista" SplitBarsSize="" Width="100%">

<telerik:RadPane ID="DataTreePane" runat="server" Width="22px" Scrolling="None">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22px">

<telerik:RadSlidingPane ID="PerformanceZone" runat="server" Title="Performance" Width="160px">

<telerik:RadTreeView ID="PerformanceTreeView" Runat="server" EnableDragAndDrop="True" LoadingStatusPosition="BeforeNodeText" Skin="Telerik" SkinID="Vista" onnodedrop="PerformanceTreeView_NodeDrop">

<CollapseAnimation Duration="100" Type="OutQuint" />

<ExpandAnimation Duration="100" Type="OutQuart" />

<DataBindings>

<telerik:RadTreeNodeBinding ImageUrlField="Image" />

</DataBindings>

</telerik:RadTreeView>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="ReportsZone" runat="server" Title="Reports" Width="160px">

<telerik:RadDatePicker ID="RadDatePicker1" Runat="server">

</telerik:RadDatePicker>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="MVZone" runat="server" Title="MV Data" Width="160px">

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="MyReportsZone" runat="server" Title="My Reports" Width="160px">

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="DataPaneSplitBar" runat="server" CollapseMode="Backward"/>

<telerik:RadPane CssClass="slide-panes" ID="ReportPane" runat="server" Height="100%" Scrolling="None" Width="100%">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="100%" width="100%">

<asp:Panel CssClass="slide-panes" ID="Panel1" runat="server" Width="100%" Height="100%" ScrollBars="None"/>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>



The User Control is :

<%

@ Control Language="C#" AutoEventWireup="true" CodeFile="LineReportControl_2.ascx.cs" Inherits="LineReportControl" %>

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%

@ Register assembly="Telerik.Charting, Version=1.7.1.0, Culture=neutral, PublicKeyToken=d14f3dcc8e3e8763" namespace="Telerik.Charting" tagprefix="telerik" %>

<

div style="width:100%;height:100%; position: relative; overflow: hidden; z-index:-1;" >

<

asp:Panel ID="OptionPanel" runat="server" Width="100%" Height="22px">

<table style="width:100%; position: relative;">

<tr>

<td width="160px">

<telerik:RadDatePicker ID="RadDatePicker11" Runat="server"

Culture="English (United States)">

<DateInput runat="server" Width="100%">

</DateInput>

<Calendar runat="server" CellAlign="Center" CellVAlign="Middle" DayNameFormat="FirstLetter"

FirstDayOfWeek="Default" MonthLayout="Layout_7columns_x_6rows"

Orientation="RenderInRows" TitleAlign="Center"

UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">

</Calendar>

</telerik:RadDatePicker>

</td>

<td width="160px">

<telerik:raddatepicker ID="EndPicker" runat="server"></telerik:raddatepicker>

</td>

<td>

&nbsp;

</td>

</tr>

</table>

</asp:Panel>

<telerik:RadChart ID="ReportLineChart" runat="server"

Skin="Vista" DefaultType="Line" Height="400px" Width="600px"

ChartImageFormat="Jpeg">

<legend>

<appearance border-color="" dimensions-margins="1px, 1%, 10%, 1px">

<itemtextappearance textproperties-color="86, 88, 89">

</itemtextappearance>

<itemmarkerappearance figure="Rectangle">

</itemmarkerappearance>

<fillstyle maincolor="">

</fillstyle>

</appearance>

<textblock>

<appearance position-alignedposition="Top" textproperties-color="86, 88, 89">

</appearance>

</textblock>

</legend>

<plotarea>

<xaxis>

<appearance color="134, 134, 134" majortick-color="134, 134, 134">

<majorgridlines color="196, 196, 196" visible="False" />

<textappearance textproperties-color="89, 89, 89">

</textappearance>

</appearance>

<axislabel>

<appearance dimensions-paddings="1px, 1px, 10%, 1px">

</appearance>

<textblock>

<appearance textproperties-color="51, 51, 51">

</appearance>

</textblock>

</axislabel>

</xaxis>

<yaxis>

<appearance color="134, 134, 134" majortick-color="196, 196, 196"

minortick-color="196, 196, 196">

<majorgridlines color="196, 196, 196" />

<minorgridlines color="196, 196, 196" visible="False" />

<textappearance textproperties-color="89, 89, 89">

</textappearance>

</appearance>

<axislabel>

<textblock>

<appearance textproperties-color="220, 158, 119">

</appearance>

</textblock>

</axislabel>

</yaxis>

<appearance border-color="WhiteSmoke" dimensions-margins="19%, 90px, 12%, 9%">

<fillstyle maincolor="Transparent" secondcolor="Transparent">

</fillstyle>

</appearance>

</plotarea>

<series>

<telerik:ChartSeries Name="Series 1" Type="Line">

<appearance border-color="">

<fillstyle maincolor="186, 207, 141" secondcolor="146, 176, 83">

<fillsettings gradientmode="Vertical">

<complexgradient>

<telerik:GradientElement Color="213, 247, 255" />

<telerik:GradientElement Color="193, 239, 252" Position="0.5" />

<telerik:GradientElement Color="157, 217, 238" Position="1" />

</complexgradient>

</fillsettings>

</fillstyle>

<textappearance textproperties-color="89, 89, 89">

</textappearance>

</appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Name="Series 2" Type="Line">

<appearance border-color="">

<fillstyle maincolor="235, 140, 104" secondcolor="214, 110, 90">

<fillsettings gradientmode="Vertical">

<complexgradient>

<telerik:GradientElement Color="218, 254, 122" />

<telerik:GradientElement Color="198, 244, 80" Position="0.5" />

<telerik:GradientElement Color="153, 205, 46" Position="1" />

</complexgradient>

</fillsettings>

</fillstyle>

<textappearance textproperties-color="89, 89, 89">

</textappearance>

</appearance>

</telerik:ChartSeries>

</series>

<appearance border-color="212, 221, 222"

corners="Round, Round, Round, Round, 7">

<fillstyle filltype="ComplexGradient">

<fillsettings>

<complexgradient>

<telerik:GradientElement Color="243, 253, 255" />

<telerik:GradientElement Color="White" Position="0.5" />

<telerik:GradientElement Color="243, 253, 255" Position="1" />

</complexgradient>

</fillsettings>

</fillstyle>

</appearance>

<charttitle>

<appearance border-visible="False" dimensions-margins="3%, 1px, 1px, 6%">

<fillstyle maincolor="">

</fillstyle>

</appearance>

<textblock text="Report Data">

<appearance textproperties-color="86, 88, 89"

textproperties-font="Verdana, 22px">

</appearance>

</textblock>

</charttitle>

</telerik:RadChart>

</div>



Both the DateTimePickers and the chart appear on top of the DataTreePane, any help would be appreciated. Thank you

1 Answer, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 21 Feb 2008, 04:40 PM
Hi jdgoulden,
I have already answered your support ticket with the same question. I will paste the information here as well, so that it is available to all who might run into the same problem:

***
Please refer to this forum thread - the solution described there should fix your problem as well.
***

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Splitter
Asked by
jdgoulden
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or