This is a migrated thread and some comments may be shown as answers.

Height and scrolbar problem

3 Answers 156 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Syed
Top achievements
Rank 1
Syed asked on 09 Aug 2008, 10:37 PM
Hi,
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

Sort by
0
Yana
Telerik team
answered on 11 Aug 2008, 02:13 PM
Hi Syed,

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.
0
Syed
Top achievements
Rank 1
answered on 12 Aug 2008, 04:58 PM
Hi,
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.
0
Paul
Telerik team
answered on 14 Aug 2008, 02:03 PM
Hello Syed,

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.
Tags
PanelBar
Asked by
Syed
Top achievements
Rank 1
Answers by
Yana
Telerik team
Syed
Top achievements
Rank 1
Paul
Telerik team
Share this question
or