Sizing RadSplitContainer

8 posts, 0 answers
  1. Todd Millett
    Todd Millett avatar
    115 posts
    Member since:
    Jul 2009

    Posted 15 Mar 2011 Link to this post

    I am placing a RadSplitContainer inside a Grid which has its width comming from the parent. I have two RadPaneGroups inside that. I want to make sure that the RadPanes inside it occupy the entire size of the ParentGrid. Is there any way, in which I can set the width in percentage like * or anything?
  2. George
    Admin
    George avatar
    1332 posts

    Posted 15 Mar 2011 Link to this post

    Hello Todd,

     
    I would suggest you to place the Panes in a DocumentHost. I hope this helps.

    Regards,
    George
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Todd Millett
    Todd Millett avatar
    115 posts
    Member since:
    Jul 2009

    Posted 15 Mar 2011 Link to this post

    Please find my code for the same :

    <telerik:RadDocking x:Name="rootDocking" HasDocumentHost="True">
                <telerik:RadDocking.DocumentHost>
                    <telerik:RadSplitContainer x:Name="splitContainer" Orientation="Horizontal">
                        <telerik:RadPaneGroup>
                            <telerik:RadDocumentPane Visibility="Collapsed" ContextMenuTemplate="{x:Null}" CanUserClose="False" CanFloat="False" CanUserPin="False" Header="Items">
                                <usercontrols:ItemsUserControl x:Name="pnlArchivedItems" />
                            </telerik:RadDocumentPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                </telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer x:Name="splitContainer1" InitialPosition="DockedRight" Orientation="Horizontal">
                    <telerik:RadPaneGroup>
                    <telerik:RadPane x:Name="previewPane" Header="Preview" 
                                             CanUserClose="False" CanFloat="False" CanUserPin="True">
                                <usercontrols:PreviewUserControl x:Name="pnlPreviewItems"/>
                                <telerik:RadPane.ContextMenuTemplate>
                                    <DataTemplate>
                                        <telerik:RadContextMenu>
                                            <telerik:RadMenuItem Click="RadMenuItem_Click" Header="|" />
                                            <telerik:RadMenuItem Header="--" Click="RadMenuItem_Click_1" />
                                        </telerik:RadContextMenu>
                                    </DataTemplate>
                                </telerik:RadPane.ContextMenuTemplate>
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
            </telerik:RadDocking>

    I was able to set the width properly, but when i dynamically try to change the Orientation of previewPane under splitContainer1 using the RadContextMenu, it was not getting reflected. Following is the code behind for the same. : 

    private void RadMenuItem_Click(object sender, Telerik.Windows.RadRoutedEventArgs e)
            {
                splitContainer1.Orientation = Orientation.Horizontal;
            }


            private void RadMenuItem_Click_1(object sender, Telerik.Windows.RadRoutedEventArgs e)
            {
                splitContainer1.Orientation = Orientation.Vertical;
            }
  5. Todd Millett
    Todd Millett avatar
    115 posts
    Member since:
    Jul 2009

    Posted 15 Mar 2011 Link to this post

    Going on the same line. The intent of the above code is to arrange two controls in two different panes such that they can be positioned horizontally or vertically at runtime, and they should also occupy the entire available space. 
  6. Dani
    Admin
    Dani avatar
    848 posts

    Posted 15 Mar 2011 Link to this post

    Hello Todd Millett,

    Try this layout:

    <telerik:RadDocking x:Name="rootDocking" HasDocumentHost="False">                
                   <telerik:RadSplitContainer x:Name="splitContainer1" InitialPosition="DockedTop" Orientation="Horizontal">
                       <telerik:RadPaneGroup>
                           <telerik:RadPane x:Name="previewPane" Header="Preview"  MinHeight="200"
                                            CanUserClose="False" CanFloat="False" CanUserPin="True">                           
                               <telerik:RadPane.ContextMenuTemplate>
                                   <DataTemplate>
                                       <telerikNavigation:RadContextMenu>
                                           <telerikNavigation:RadMenuItem Click="RadMenuItem_Click" Header="|" />
                                           <telerikNavigation:RadMenuItem Header="--" Click="RadMenuItem_Click_1" />
                                       </telerikNavigation:RadContextMenu>
                                   </DataTemplate>
                               </telerik:RadPane.ContextMenuTemplate>
                               <Grid>
                                   <TextBlock Text="UserControl 1" />
                               </Grid>
                       </telerik:RadPane>
                   </telerik:RadPaneGroup>
                         
                   <telerik:RadPaneGroup>
                       <telerik:RadPane Header="Pane Left 1" MinHeight="200" ContextMenuTemplate="{x:Null}">
                           <Grid>
                               <TextBlock Text="UserControl 2" />
                           </Grid>                        
                       </telerik:RadPane>
                   </telerik:RadPaneGroup>
                         
               </telerik:RadSplitContainer>
               </telerik:RadDocking>  

    The Orientation property of the RadSplitContainer changes the orientation of its children much like the Orientation property of a StackPanel works. You need to have both your user controls inside the RadSplitContainer, into separate RadPaneGroups, in order for the handlers to work properly.

    Greetings,
    Dani
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  7. Todd Millett
    Todd Millett avatar
    115 posts
    Member since:
    Jul 2009

    Posted 16 Mar 2011 Link to this post

    Thanks, that worked.
  8. Todd Millett
    Todd Millett avatar
    115 posts
    Member since:
    Jul 2009

    Posted 16 Mar 2011 Link to this post

    The solution works in IE windows, but when i try the same thing in MAC the code behind code does not work i.e setting the orientation dynamically in code behind works in windows but not in MAC. Can you please verify this behavior?
  9. Dani
    Admin
    Dani avatar
    848 posts

    Posted 17 Mar 2011 Link to this post

    Hello Todd,

    We tested this solution on a MAC and the result was positive - it works as expected.
    Please, find attached the sample which we used to test the behavior and a short movie of how the Docking control behaves.
    Please, note that the MAC version is 10.6.5 and the project is running on Firefox and on Safari.

    Best wishes,
    Dani
    the Telerik team
Back to Top
DevCraft banner