Quan Nguyen
Top achievements
Rank 1
Rank 1
Quan Nguyen
asked on 24 Jan 2008, 12:51 PM
I have an outer splitter with 3 row, header, content and footer set to 100% height. In content area i i have an inner splitter with left and right pane, which also set to 100% height of content area. In the left pane I have a splitter that divides the left side in two radpanes, the top for subnavigation and the bottom för main navigation (just like MS Web Outlook).
In the main navigation pane I have a RadPanelbar and the items load dynamic at runtime and depends aón user role. The problem is that I cannot set the height property of the main navigation pane equally to the RadPanelbar's height. The splitter in the left pane divides the two panes 50/50 (if I don't set the height property of those two), which is not good because all the empty space at the bottom which I don't want to have. I wanna set the height property of the main navigation pane equally to the RadPanelbar's height. How can I do that?
In the main navigation pane I have a RadPanelbar and the items load dynamic at runtime and depends aón user role. The problem is that I cannot set the height property of the main navigation pane equally to the RadPanelbar's height. The splitter in the left pane divides the two panes 50/50 (if I don't set the height property of those two), which is not good because all the empty space at the bottom which I don't want to have. I wanna set the height property of the main navigation pane equally to the RadPanelbar's height. How can I do that?
6 Answers, 1 is accepted
0
Hi Quan Nguyen,
In order to achieve the desired effect, you will have to calculate the Height of the content of the RadPane as soon as you have created and added RadPanelbar to it and set that value as Height of the RadPane. You can use the ClientLoaded event of the RadSplitter control for example. Have a look at the following code fragment:
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
In order to achieve the desired effect, you will have to calculate the Height of the content of the RadPane as soon as you have created and added RadPanelbar to it and set that value as Height of the RadPane. You can use the ClientLoaded event of the RadSplitter control for example. Have a look at the following code fragment:
| <body> |
| <script type="text/javascript"> |
| function OnClientLoadedHandler(splitter, args) |
| { |
| var pane = splitter.getPaneById("<%= RadPane2.ClientID %>"); |
| var parentContent = pane.getContentElement(); |
| var originalHeight = pane.get_height(); |
| pane.set_height(1); //Otherwise the scrollHeight will not be correct in FF |
| var contentHeight = parentContent.scrollHeight; |
| var topPane = splitter.getPaneById("<%= RadPane1.ClientID %>"); |
| topPane.set_height(topPane.get_height() + (originalHeight - contentHeight)); |
| pane.set_height(contentHeight); |
| } |
| </script> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoadedHandler" Orientation="Horizontal"> |
| <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane> |
| <telerik:RadPane ID="RadPane2" runat="server"> |
| <div style="height:100px;width:100px;background-color:Red;"></div> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Quan Nguyen
Top achievements
Rank 1
Rank 1
answered on 28 Jan 2008, 10:46 AM
Hi,
Thnx for a great answer, but there is still some problem with your solution. When you resize the browswer window or maximine it, the height property doesn't recaculate and therefore leaves empty space or cut of the content at the bottom (if set Scrollning="None").
Thnx for a great answer, but there is still some problem with your solution. When you resize the browswer window or maximine it, the height property doesn't recaculate and therefore leaves empty space or cut of the content at the bottom (if set Scrollning="None").
0
Hello Quan Nguyen,
Indeed, you are correct. I would recommend that as soon as you set the desired height to the bottom pane, you lock that pane:
In case you intent to change the height of that pane however, you can just execute that code, when the RadSplitter gets resized as well:
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Indeed, you are correct. I would recommend that as soon as you set the desired height to the bottom pane, you lock that pane:
| <script type="text/javascript"> |
| function OnClientLoadedHandler(splitter, args) |
| { |
| var pane = splitter.getPaneById("<%= RadPane2.ClientID %>"); |
| var parentContent = pane.getContentElement(); |
| var originalHeight = pane.get_height(); |
| pane.set_height(1); |
| var contentHeight = parentContent.scrollHeight; |
| var topPane = splitter.getPaneById("<%= RadPane1.ClientID %>"); |
| topPane.set_height(topPane.get_height() + (originalHeight - contentHeight)); |
| pane.set_height(contentHeight); |
| pane.set_locked(true); |
| } |
| </script> |
In case you intent to change the height of that pane however, you can just execute that code, when the RadSplitter gets resized as well:
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" |
| OnClientLoaded="OnClientLoadedHandler" Orientation="Horizontal" |
| OnClientResized="OnClientLoadedHandler"> |
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Quan Nguyen
Top achievements
Rank 1
Rank 1
answered on 28 Jan 2008, 02:36 PM
great, thnx!
0
Leo
Top achievements
Rank 1
Rank 1
answered on 25 Jun 2008, 04:30 PM
I'm having a similar problem.
I've got a splitter with a single pane. I want to create a flyout menu which uses a RadPanelBar for the dynamic menu items and categories. The problem I am facing is that if I don't pre-define the width of the single RadPane in the splitter at design time, the RadPanelBar does not cause the RadSplitter to slide out and present the menu - it's as if it slides UNDER the other content.
I've submitted a trouble ticket and attached screenshots. This is a MOSS solution designed to replace the left hand "quick navigation"
screenshot 1 - shows how I'd like the UI to look (ignore styling) with a narrow button for the menu hover-over
screenshot 2 - shows how I'd like the UI to look after the menu pops out. Unfortunately I have to preset the width of the RadPane to get this effect. By presetting the width of the RadPane, I lose the screen real-estate I'd prefer to use for content (and have the menu expand over the content)
I've tried modifying the javascript used here, but it doesn't seem to work for me. Perhaps the problem is MOSS itself?
I've got a splitter with a single pane. I want to create a flyout menu which uses a RadPanelBar for the dynamic menu items and categories. The problem I am facing is that if I don't pre-define the width of the single RadPane in the splitter at design time, the RadPanelBar does not cause the RadSplitter to slide out and present the menu - it's as if it slides UNDER the other content.
I've submitted a trouble ticket and attached screenshots. This is a MOSS solution designed to replace the left hand "quick navigation"
screenshot 1 - shows how I'd like the UI to look (ignore styling) with a narrow button for the menu hover-over
screenshot 2 - shows how I'd like the UI to look after the menu pops out. Unfortunately I have to preset the width of the RadPane to get this effect. By presetting the width of the RadPane, I lose the screen real-estate I'd prefer to use for content (and have the menu expand over the content)
I've tried modifying the javascript used here, but it doesn't seem to work for me. Perhaps the problem is MOSS itself?
0
Hi Leo,
I suggest to examine our KB articles, which concern the integration of RadSplitter and RadMenu:
http://www.telerik.com/support/kb/article/b454K-tkm-b454T-cka-b454c-cka.aspx
http://www.telerik.com/support/kb/article/b454K-tgk-b454T-cka-b454c-cka.aspx
In case this does not help, please open a new support ticket and send me a sample , reproduction project along with your explanations. Once I receive it, I will do my best to modify it in order to meet your requirements.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I suggest to examine our KB articles, which concern the integration of RadSplitter and RadMenu:
http://www.telerik.com/support/kb/article/b454K-tkm-b454T-cka-b454c-cka.aspx
http://www.telerik.com/support/kb/article/b454K-tgk-b454T-cka-b454c-cka.aspx
In case this does not help, please open a new support ticket and send me a sample , reproduction project along with your explanations. Once I receive it, I will do my best to modify it in order to meet your requirements.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center