Change Splitter Orientation with checkbox

6 posts, 0 answers
  1. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 19 Aug 2008 Link to this post

    Hi,
    I have an fullscreen Splitter and want to change the orientation of this splitter with a checkbox. Do you have an example for this usecase?

    Thank you very much
    Christian
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 20 Aug 2008 Link to this post

    When you change the Splitter orientation, you should set its new dimensions, e.g.
    ASPX:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>       
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%">  
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body style="height:100%;width:100%;margin:0px">  
        <form id="form1" runat="server" style="height:100%;width:100%">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" 
        Orientation="Horizontal" FullScreenMode="true" 
        > 
            <telerik:RadPane ID="RadPane1" runat="server" Width="200px">  
                <asp:Button ID="btnChangeOrientation" runat="server" Text="ChangeOrientation" OnClick="btnChangeOrientation_Click" /> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
            <telerik:RadPane ID="RadPane2" runat="server" Width="200px">  
              
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
    C#:
    protected void btnChangeOrientation_Click(object sender, EventArgs e)  
        {  
            if (RadSplitter1.Orientation == Orientation.Horizontal)  
            {  
                RadSplitter1.Orientation = Orientation.Vertical;  
                RadSplitter1.Width = Unit.Percentage(100);  
                RadSplitter1.Height = Unit.Percentage(100);  
                RadPane1.Height = Unit.Pixel(200);  
                RadPane1.Width = Unit.Percentage(100);  
                RadPane2.Width = Unit.Percentage(100);  
            }  
            else 
            {  
                RadSplitter1.Orientation = Orientation.Horizontal;  
                RadSplitter1.Width = Unit.Percentage(100);  
                RadSplitter1.Height = Unit.Percentage(100);  
                RadPane1.Height = Unit.Percentage(100);  
                RadPane1.Width = Unit.Pixel(200);  
                RadPane2.Height = Unit.Percentage(100);  
            }  
        } 
    Hope this helps.
  3. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 09 Sep 2008 Link to this post

    This works not 100%. After the Postback, the content of the Panes is switched. When is the last event to set the splitter layout (with trees inside)?
    Can I change the orientation at clientside?
  4. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 09 Sep 2008 Link to this post

    What you mean by "content of the Panes is switched" ?
    As far as I know you couldn't change the orientation on the client.
    The latest event should be OnPreRender.
  5. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 10 Sep 2008 Link to this post

    Hi,
    I have got a  layout with three panes (explorer style). On the left there are two trees horizontally splitted and on the right side there is an content pane. After I postback and switched the splitting-orientation of the two trees to vertical, everything is ok. But when I switch back to horizontal orientation, the trees are swapped. The next problem is, that the context-menu no longer works. It has been added to the tree in the markup code.
    I think it would be much better for me to change the orientation on the clientside. Are there any efforts in this direction.

    Thanks
    Christian
  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Sep 2008 Link to this post

    Hi Christian,
    I tried to reproduce the problem with the switched content, but to no avail. I have attached my test page for your reference. In it, I use a slightly different approach than the one, suggested by Obi-Wan Kenobi - I do not switch the size of the panes, but simple set their Width and Height to Unit.Empty. This is necessary, because the RadPanes persist their size across postbacks, in order to render as closely as possible to their correct client size (when the splitter is in percents, it needs to calculate its size on the client in pixels).

    if (RadSplitter2.Orientation == Orientation.Vertical)  
    {  
        RadSplitter2.Orientation = Orientation.Horizontal;  
    }  
    else 
    {  
        RadSplitter2.Orientation = Orientation.Vertical;  
    }  
    RadPane3.Width = Unit.Empty;  
    RadPane3.Height = Unit.Empty;  
     
    RadPane4.Width = Unit.Empty;  
    RadPane4.Height = Unit.Empty; 

    Please review the attached test page, I suppose this is exactly what you are after. In case I am not correct, please explain in detail what you what to achieve. In this case it would be best if you could send us your code, so that we can work with it.

    As for your last question - whether you can change the Orientation of the splitter on the client - no, this is not possible, because the HTML of the splitter is created on the server and it is different for the two values of the Orientation property. You can wrap your splitter in an UpdatePanel however - I have demonstrated this in the attached test page as well.

    Greetings,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top