Hi,
I got a control which was intended to be a master page (this control was originally developed under ASP.NET 1.1 Framework) and now we have shifted the application to ASP.NET 2.0 but without changing the control to the master page control provided by framework.
We are currently using the Telerik control for the RadTreeView, RadDock and the RadSplitter controls.
My question is when I add the RadSplitter control into our old master page implementation as a child item, the RadSplitter does not expand 100% to follow its parent container.
So far whenever I added a new control to become the child item of our master page control, it always get expanded 100% to fit it's parent area. However, it's not the case for RadSplitter. There seems to be a gap on the right side of our master page area which are not utilised by the RadSplitter control.
For additional information, I also added a RadDockZone control within one of the RadPanel controls in the RadSplitter.
Is there any recommendation that I could use to fix this issue? I've ensured the parent control (our master page) to expand 100% (it's using a table) but the gap is still there.
The following code probably can give you an idea of what I am trying to achieve:
<telerik:RadScriptManager ID="radCaseDisplayScriptManager" runat="server"></telerik:RadScriptManager>
<div style="width:100%">
<telerik:RadSplitter id="splDisplaySplitter" runat="server" Height="100%" liveresize="true" width="100%" BorderWidth="0" BorderSize="0">
<telerik:RadPane id="rpnLeftSection" runat="server" Width="30%" Height="100%">
<telerik:raddocklayout runat="server" id="RadDockLayout1" >
<table>
<tr>
<td>
<telerik:raddockzone runat="server" id="rdzLeftSectionContainer" Width="95%">
<telerik:raddock runat="server" id="rdkQuickSearch" title="Quick Search" DefaultCommands="ExpandCollapse" Width="100%" DockMode="Docked" >
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<QuickSearch:QuickSearch ID="objQuickSearch" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkReferredCaseList" title="Referred Case List" DefaultCommands="ExpandCollapse" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<Referral:Referral ID="objReferralList" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkRecentCaseList" defaultcommands="ExpandCollapse" title="Recent Case List" Width="100%" DockMode="Docked">
<contenttemplate>
<center>
<Recent:Recent ID="objRecentList" runat="server" />
</center>
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkCurrentCaseList" defaultcommands="ExpandCollapse" title="Current Case List" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<Current:Current ID="objCurrentList" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkActivityCompletionChart" defaultcommands="ExpandCollapse" title="Activity Completion Chart" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<PieChart:PieChart ID="objCompletionChart" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkActivityComparisonChart" defaultcommands="ExpandCollapse" title="Activity Comparison Chart" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<BarChart:BarChart ID="objComparisonChart" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
</telerik:raddockzone>
</td>
</tr>
</table>
</telerik:raddocklayout>
</telerik:RadPane>
<telerik:RadSplitBar id="spbSplitBar" runat="server" collapsemode="forward" Height="100%"></telerik:RadSplitBar>
<telerik:RadPane ID="rpnRightSection" runat="server" MinWidth="500" Width="70%" Height="100%" >
<table cellspacing="0" cellpadding="10" width="100%" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td valign="top" align="left">
<h3 id="h3Name" runat="server">Case Template Details</h3>
</td>
<td valign="top" align="right">
<asp:HyperLink ID="hypEditLink" ImageUrl="~/CORE/images/edit.gif" Runat="server" />
<asp:Button ID="btnUnexpire" Text="Un-Expire" Visible="False" CssClass="btn" Runat="server" />
<asp:HyperLink ID="hypPrintLink" ImageUrl="~/CORE/images/print.jpg" Runat="server" />
<br />
</td>
</tr>
<tr>
<td valign="top" align="center" colspan="2"><nobr><asp:Label ID="lblNote" Runat="server" /></nobr></td>
</tr>
</table>
<br />
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Type: </nobr></td>
<td valign="top">
<asp:label ID="lblType" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Reference No: </nobr></td>
<td valign="top">
<asp:label ID="lblReference" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Category: </nobr></td>
<td valign="top">
<asp:label ID="lblCategory" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Case Status: </nobr></td>
<td valign="top">
<asp:Label ID="lblStatus" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Sub Category: </nobr></td>
<td valign="top">
<asp:label ID="lblSubCategory" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Client: </nobr></td>
<td valign="top">
<asp:HyperLink ID="hypClientContact" runat="server"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td valign="top" class="txtBold" width="90">
Name:
</td>
<td valign="top">
<asp:Label ID="lblName" Runat="server" />
</td>
</tr>
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td valign="top" nowrap class="txtBold" width="90">
Description:
</td>
<td valign="top">
<asp:Label ID="lblDescription" Runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" colspan="3"><span class="OrderHeading">Phases and Activities</span></td>
</tr>
<tr>
<td valign="top" colspan="3"> </td>
</tr>
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td valign="top" colspan="2">
<telerik:RadTreeView ID="rtvTreeView" runat="server" EnableDragAndDrop="false" MultipleSelect="false" CssClass="TreeView" Height="350px" Width="750" TabIndex="1" OnClientContextMenuItemClicking="onClientContextMenuItemClicking">
<ContextMenus>
<telerik:RadTreeViewContextMenu ID="rcmTemplateMenu" runat="server">
<Items>
<telerik:RadMenuItem Value="Collapse" Text="Collapse" />
<telerik:RadMenuItem Value="Collapse All Phases" Text="Collapse All Phases" />
</Items>
</telerik:RadTreeViewContextMenu>
<telerik:RadTreeViewContextMenu ID="rcmPhaseMenu" runat="server">
<Items>
<telerik:RadMenuItem Value="Collapse" Text="Collapse" />
</Items>
</telerik:RadTreeViewContextMenu>
</ContextMenus>
</telerik:RadTreeView>
</td>
</tr>
</table>
<br />
<table width="100%" border="0">
<tr>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Created by</td>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Created date</td>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Modified by</td>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Modified date</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblCreatedByName" Runat="server" /> </td>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblCreatedByDate" Runat="server" /> </td>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblModifiedByName" Runat="server" /> </td>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblModifiedByDate" Runat="server" /> </td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
Many Thanks
Rully
I got a control which was intended to be a master page (this control was originally developed under ASP.NET 1.1 Framework) and now we have shifted the application to ASP.NET 2.0 but without changing the control to the master page control provided by framework.
We are currently using the Telerik control for the RadTreeView, RadDock and the RadSplitter controls.
My question is when I add the RadSplitter control into our old master page implementation as a child item, the RadSplitter does not expand 100% to follow its parent container.
So far whenever I added a new control to become the child item of our master page control, it always get expanded 100% to fit it's parent area. However, it's not the case for RadSplitter. There seems to be a gap on the right side of our master page area which are not utilised by the RadSplitter control.
For additional information, I also added a RadDockZone control within one of the RadPanel controls in the RadSplitter.
Is there any recommendation that I could use to fix this issue? I've ensured the parent control (our master page) to expand 100% (it's using a table) but the gap is still there.
The following code probably can give you an idea of what I am trying to achieve:
<telerik:RadScriptManager ID="radCaseDisplayScriptManager" runat="server"></telerik:RadScriptManager>
<div style="width:100%">
<telerik:RadSplitter id="splDisplaySplitter" runat="server" Height="100%" liveresize="true" width="100%" BorderWidth="0" BorderSize="0">
<telerik:RadPane id="rpnLeftSection" runat="server" Width="30%" Height="100%">
<telerik:raddocklayout runat="server" id="RadDockLayout1" >
<table>
<tr>
<td>
<telerik:raddockzone runat="server" id="rdzLeftSectionContainer" Width="95%">
<telerik:raddock runat="server" id="rdkQuickSearch" title="Quick Search" DefaultCommands="ExpandCollapse" Width="100%" DockMode="Docked" >
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<QuickSearch:QuickSearch ID="objQuickSearch" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkReferredCaseList" title="Referred Case List" DefaultCommands="ExpandCollapse" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<Referral:Referral ID="objReferralList" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkRecentCaseList" defaultcommands="ExpandCollapse" title="Recent Case List" Width="100%" DockMode="Docked">
<contenttemplate>
<center>
<Recent:Recent ID="objRecentList" runat="server" />
</center>
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkCurrentCaseList" defaultcommands="ExpandCollapse" title="Current Case List" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<Current:Current ID="objCurrentList" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkActivityCompletionChart" defaultcommands="ExpandCollapse" title="Activity Completion Chart" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<PieChart:PieChart ID="objCompletionChart" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
<telerik:raddock runat="server" id="rdkActivityComparisonChart" defaultcommands="ExpandCollapse" title="Activity Comparison Chart" Width="100%" DockMode="Docked">
<contenttemplate>
<br />
<table width="100%">
<tr>
<td align="center">
<BarChart:BarChart ID="objComparisonChart" runat="server" />
</td>
</tr>
</table>
<br />
</contenttemplate>
</telerik:raddock>
</telerik:raddockzone>
</td>
</tr>
</table>
</telerik:raddocklayout>
</telerik:RadPane>
<telerik:RadSplitBar id="spbSplitBar" runat="server" collapsemode="forward" Height="100%"></telerik:RadSplitBar>
<telerik:RadPane ID="rpnRightSection" runat="server" MinWidth="500" Width="70%" Height="100%" >
<table cellspacing="0" cellpadding="10" width="100%" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td valign="top" align="left">
<h3 id="h3Name" runat="server">Case Template Details</h3>
</td>
<td valign="top" align="right">
<asp:HyperLink ID="hypEditLink" ImageUrl="~/CORE/images/edit.gif" Runat="server" />
<asp:Button ID="btnUnexpire" Text="Un-Expire" Visible="False" CssClass="btn" Runat="server" />
<asp:HyperLink ID="hypPrintLink" ImageUrl="~/CORE/images/print.jpg" Runat="server" />
<br />
</td>
</tr>
<tr>
<td valign="top" align="center" colspan="2"><nobr><asp:Label ID="lblNote" Runat="server" /></nobr></td>
</tr>
</table>
<br />
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Type: </nobr></td>
<td valign="top">
<asp:label ID="lblType" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Reference No: </nobr></td>
<td valign="top">
<asp:label ID="lblReference" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Category: </nobr></td>
<td valign="top">
<asp:label ID="lblCategory" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Case Status: </nobr></td>
<td valign="top">
<asp:Label ID="lblStatus" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Sub Category: </nobr></td>
<td valign="top">
<asp:label ID="lblSubCategory" Width="250px" Runat="server" />
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td class="txtBold" valign="top" width="90"><nobr>Client: </nobr></td>
<td valign="top">
<asp:HyperLink ID="hypClientContact" runat="server"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td valign="top" class="txtBold" width="90">
Name:
</td>
<td valign="top">
<asp:Label ID="lblName" Runat="server" />
</td>
</tr>
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td valign="top" nowrap class="txtBold" width="90">
Description:
</td>
<td valign="top">
<asp:Label ID="lblDescription" Runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" colspan="3"><span class="OrderHeading">Phases and Activities</span></td>
</tr>
<tr>
<td valign="top" colspan="3"> </td>
</tr>
<tr>
<td class="txtbold" valign="top" width="15">
</td>
<td valign="top" colspan="2">
<telerik:RadTreeView ID="rtvTreeView" runat="server" EnableDragAndDrop="false" MultipleSelect="false" CssClass="TreeView" Height="350px" Width="750" TabIndex="1" OnClientContextMenuItemClicking="onClientContextMenuItemClicking">
<ContextMenus>
<telerik:RadTreeViewContextMenu ID="rcmTemplateMenu" runat="server">
<Items>
<telerik:RadMenuItem Value="Collapse" Text="Collapse" />
<telerik:RadMenuItem Value="Collapse All Phases" Text="Collapse All Phases" />
</Items>
</telerik:RadTreeViewContextMenu>
<telerik:RadTreeViewContextMenu ID="rcmPhaseMenu" runat="server">
<Items>
<telerik:RadMenuItem Value="Collapse" Text="Collapse" />
</Items>
</telerik:RadTreeViewContextMenu>
</ContextMenus>
</telerik:RadTreeView>
</td>
</tr>
</table>
<br />
<table width="100%" border="0">
<tr>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Created by</td>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Created date</td>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Modified by</td>
<td style="vertical-align: top; text-align: center; font-weight: bold;" width="25%">Modified date</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblCreatedByName" Runat="server" /> </td>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblCreatedByDate" Runat="server" /> </td>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblModifiedByName" Runat="server" /> </td>
<td style="vertical-align: top; text-align: center;" width="25%"><asp:Label ID="lblModifiedByDate" Runat="server" /> </td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
Many Thanks
Rully
1 Answer, 1 is accepted
0
Hello Amirul,
I built up a test demo page, based on your code but unfortunately I was not able to reproduce the problem. I had to remove your user controls declarations and after I ran the page I could not see the problem.
However, I noticed that you DIV element which is the parent of the splitter does not occupy 100% of the page - you can tets this by setting some colored border - the splitter will occupy 100% of its parent and thus, if you want it to occupy the whole page, you should firts configure the DIV. Otherwise, the splitter is taking exactly 100% of DIV.
I recommend to also uinclude the following style in the head:
and also set explicit height to the DIV (you can do this in percentages, pixels - I hhave set it to 100% in the test page but you can modify the setting according to your needs)
I also reccomend to set the splitter's VisibleDuringInit property to false in ordre to hide the initial resize of the splitter from the end user and to get a better behavior.
I attached my test page to the thread for your reference and I hope it is helpful.
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I built up a test demo page, based on your code but unfortunately I was not able to reproduce the problem. I had to remove your user controls declarations and after I ran the page I could not see the problem.
However, I noticed that you DIV element which is the parent of the splitter does not occupy 100% of the page - you can tets this by setting some colored border - the splitter will occupy 100% of its parent and thus, if you want it to occupy the whole page, you should firts configure the DIV. Otherwise, the splitter is taking exactly 100% of DIV.
I recommend to also uinclude the following style in the head:
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| } |
| </style> |
and also set explicit height to the DIV (you can do this in percentages, pixels - I hhave set it to 100% in the test page but you can modify the setting according to your needs)
I also reccomend to set the splitter's VisibleDuringInit property to false in ordre to hide the initial resize of the splitter from the end user and to get a better behavior.
I attached my test page to the thread for your reference and I hope it is helpful.
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.