I have a radpanelbar which consist of 4panelitem and under the 1st panel item i am loading a radtree.Now the problem is whenever my tree items list gets bigger then the page are it enables a scrollbar on right side of the panelbar and pushes the othe items at the bottom of the page.I was using rad controls for asp.net earlier and converted my project to the new rad control for asp.net ajax.And i fixed this issue on the earlier version by enabling childgroupheight but this thing is no working with the new one.I have attached some sample screenshots and state03.jpg is the format i want the panelbar to be.Plus whenver the vertical scrollbar enables it automatically expands the horizontal scrollbar.Any idea how i can solve this.Just to let u know i dont want use
ExpandMode="FullExpandedItem"
properties for this.Would be of great help if anyone could provide some help.Thanks.
Screenshots Files
Here's my code:
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"
Skin="WebBlue" ResizeMode="EndPane">
<telerik:RadPane BackColor="White" ID="navigationPane" Height="100%" runat="server" Width="210px">
<!--Panel Bar Starts-->
<telerik:RadPanelBar runat="server" ID="RadPanelbar1" Skin="Web20" Width="100%" >
<Items>
<telerik:RadPanelItem runat="server" Text="A" Expanded="true" onClick="clickMe('A');">
<Items>
<telerik:RadPanelItem runat="server">
<ItemTemplate>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<telerik:RadTreeView ID="RadTreeView1"
OnClientNodeClicking="onClientNodeClickedHandler"
EnableViewState="true" EnableEmbeddedSkins="false"
RetainScrollPosition="true" Skin="Vista" runat="server">
</telerik:RadTreeView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="Timer" runat="server" UpdateMode="Conditional"
>
<ContentTemplate >
<asp:Timer ID="RadTreeUpdate" runat="server" Interval="60000"
ontick="RadTreeUpdate_Tick" >
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<telerik:RadToolTip ID="RadToolTip1" runat="server">
</telerik:RadToolTip>
<telerik:RadToolTipManager ID="tolTip" runat="server"
RelativeTo="Element" Position="MiddleRight"
Width="120" Animation="Fade">
</telerik:RadToolTipManager>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Visible="false" Text="Tracking">
<Items>
<telerik:RadPanelItem runat="server" Text="Show all Units">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" onclick="OpenSearch()" Text="Track a Unit">
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B" onClick="clickMe('Admin');">
<Items>
<telerik:RadPanelItem runat="server" Text="B1"
onClick="ReLoadWindow('Widgets/CreateUser.aspx','450','500')">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B2"
onClick="ReLoadWindow('Widgets/UpdateUser.aspx','400','600')">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B3"
onClick="ReLoadWindow('Widgets/AssetType.aspx','320','450')">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B4"
onClick="ReLoadWindow('Widgets/Group.aspx','300','400') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B5"
onClick="ReLoadWindow('Widgets/VehicleSetup.aspx','700','735') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B6"
onClick="ReLoadWindow('Widgets/VehicleUpdate.aspx','710','730') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B7"
onClick="ReLoadWindow('Widgets/AllRules.aspx','540','550') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B8"
onClick="ReLoadWindow('Widgets/Geofence.aspx','600','550') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="B9"
onClick="ReLoadWindow('Widgets/AssetStatus.aspx','725','350') ">
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="C" onClick="clickMe('C');">
<Items>
<telerik:RadPanelItem runat="server" Text="C1"
onClick="ReLoadWindow('Widgets/AssetStatus.aspx','725','350') ">
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="D" onClick="clickMe('D');">
<Items>
<telerik:RadPanelItem runat="server" Text="D1"
onClick="ReLoadWindow('Fleet/createSupplies.aspx','470','350') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="D2"
onClick="ReLoadWindow('Fleet/PatternList.aspx','650','450') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="D3"
onClick="ReLoadWindow('Fleet/InitiateMaintainance.aspx','650','450') ">
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="D4"
onClick="ReLoadWindow('Fleet/MaintainanceStatus.aspx','650','450') ">
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
<!--Panel bar ends-->
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>
<telerik:RadPane BorderColor="red" BorderStyle="Solid" BorderWidth="2px" ID="MapPane"
runat="server" Scrolling="none" ContentUrl="Widgets/A.aspx">
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="None"></telerik:RadSplitBar>
<telerik:RadPane BackColor="Black" BorderColor="red" BorderStyle="Solid" BorderWidth="2px"
ID="ToolBox" runat="server" Scrolling="none" Width="42px">
<table>
<tr>
<td>
<asp:UpdatePanel ID="uReset" runat="server">
<ContentTemplate>
<asp:ImageButton onmouseout="hideTooltip()"
onmouseover="showTooltip(event,'Rt'); return false"
ID="btnReset" runat="server" OnClientClick="refreshPane('MapPane');"
ImageUrl="Icons/RBt.gif" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="uPrint" runat="server">
<ContentTemplate>
<asp:ImageButton onmouseout="hideTooltip()"
onmouseover="showTooltip(event,'Pt'); return false"
ID="btnPrint" OnClientClick="PrintPane('MapPane');" runat="server"
ImageUrl="Icons/tBt.gif"
OnClick="btnPrint_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="uEmail" runat="server">
<ContentTemplate>
<asp:ImageButton onmouseout="hideTooltip()"
onmouseover="showTooltip(event,'E'); return false"
ID="btnEmail" runat="server" ImageUrl="Icons/EBt.gif"
OnClick="btnEmail_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="uHelp" runat="server">
<ContentTemplate>
<asp:ImageButton onmouseout="hideTooltip()"
onmouseover="showTooltip(event,'op'); return false"
ID="btnHelp" runat="server" ImageUrl="Icons/HBt.gif"
OnClick="btnHelp_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="uExit" runat="server">
<ContentTemplate>
<asp:ImageButton onmouseout="hideTooltip()"
onmouseover="showTooltip(event,'Et'); return false"
ID="btnExit" runat="server" ImageUrl="Icons/EtBt.gif"
OnClick="btnExit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</telerik:RadPane>
</telerik:RadSplitter>
3 Answers, 1 is accepted
Thank you for contacting us.
I tested the provided code with ChildGroupHeight set and it worked as expected. Please check the attached project. Let me know if I am missing something.
Kind regards,
Yana
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Thanks for the reply.It works when i define the height in px but doesnt work when i give % since the nodes can have unlimited no of readings and if i give pixel i'll have user screnn resolution issue.But i was thinking why you had the previous prpoerty of rad control for asp.net not avaialable at the ajax version.I didnt have any problem at all when i used % with the previous rad control.Any other suggestions?Thanks.
You can achieve the desired look if the panelbar is in FullExpandedItem mode. Here's your modified code snippet that works as expected.
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| margin: 0; |
| height: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <div> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Skin="WebBlue" ResizeMode="EndPane"> |
| <telerik:RadPane BackColor="White" ID="navigationPane" Height="100%" runat="server" Width="210px"> |
| <!--Panel Bar Starts--> |
| <telerik:RadPanelBar runat="server" ID="RadPanelbar1" Skin="Web20" Width="100%" Height="100%" ExpandMode="FullExpandedItem"> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="A" Expanded="true" ChildGroupHeight="275px"> |
| <Items> |
| <telerik:RadPanelItem runat="server"> |
| <ItemTemplate> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <telerik:RadTreeView ID="RadTreeView1" EnableViewState="true" Skin="Vista" runat="server"> |
| <Nodes> |
| <telerik:RadTreeNode Text="node 1" /> |
| <telerik:RadTreeNode Text="node 2" /> |
| <telerik:RadTreeNode Text="node 3" /> |
| <telerik:RadTreeNode Text="node 4" /> |
| <telerik:RadTreeNode Text="node 5" /> |
| <telerik:RadTreeNode Text="node 6" /> |
| <telerik:RadTreeNode Text="node 7" /> |
| <telerik:RadTreeNode Text="node 8" /> |
| <telerik:RadTreeNode Text="node 9" /> |
| <telerik:RadTreeNode Text="node 10" /> |
| <telerik:RadTreeNode Text="node 1" /> |
| <telerik:RadTreeNode Text="node 2" /> |
| <telerik:RadTreeNode Text="node 3" /> |
| <telerik:RadTreeNode Text="node 4" /> |
| <telerik:RadTreeNode Text="node 5" /> |
| <telerik:RadTreeNode Text="node 6" /> |
| <telerik:RadTreeNode Text="node 7" /> |
| <telerik:RadTreeNode Text="node 8" /> |
| <telerik:RadTreeNode Text="node 9" /> |
| <telerik:RadTreeNode Text="node 10" /> |
| </Nodes> |
| </telerik:RadTreeView> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| <asp:UpdatePanel ID="Timer" runat="server" UpdateMode="Conditional"> |
| <ContentTemplate> |
| <asp:Timer ID="RadTreeUpdate" runat="server" Interval="60000"> |
| </asp:Timer> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| <telerik:RadToolTip ID="RadToolTip1" runat="server"> |
| </telerik:RadToolTip> |
| <telerik:RadToolTipManager ID="tolTip" runat="server" RelativeTo="Element" Position="MiddleRight" Width="120" Animation="Fade"> |
| </telerik:RadToolTipManager> |
| </ItemTemplate> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Visible="false" Text="Tracking"> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="Show all Units"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="Track a Unit"> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B" ChildGroupHeight="275px"> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="B1"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B2"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B3"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B4"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B5"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B6"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B7"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B8"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B9"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B1"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B2"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="B3"> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="C" ChildGroupHeight="275px"> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="C1"> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="D" ChildGroupHeight="275px"> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="D1"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="D2"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="D3"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="D4"> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelBar> |
| <!--Panel bar ends--> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar> |
| <telerik:RadPane BorderColor="red" BorderStyle="Solid" BorderWidth="2px" ID="MapPane" runat="server" Scrolling="none"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="None"></telerik:RadSplitBar> |
| <telerik:RadPane BackColor="Black" BorderColor="red" BorderStyle="Solid" BorderWidth="2px" ID="ToolBox" runat="server" Scrolling="none" Width="42px"> |
| <table> |
| <tr> |
| <td> |
| <asp:UpdatePanel ID="uReset" runat="server"> |
| <ContentTemplate> |
| <asp:ImageButton ID="btnReset" runat="server" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <asp:UpdatePanel ID="uPrint" runat="server"> |
| <ContentTemplate> |
| <asp:ImageButton ID="btnPrint" runat="server" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <asp:UpdatePanel ID="uEmail" runat="server"> |
| <ContentTemplate> |
| <asp:ImageButton ID="btnEmail" runat="server" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <asp:UpdatePanel ID="uHelp" runat="server"> |
| <ContentTemplate> |
| <asp:ImageButton ID="btnHelp" runat="server" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <asp:UpdatePanel ID="uExit" runat="server"> |
| <ContentTemplate> |
| <asp:ImageButton ID="btnExit" runat="server" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </form> |
| </body> |
| </html> |
Sincerely yours,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.