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

Change Splitter Orientation with checkbox

5 Answers 81 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 19 Aug 2008, 08:16 AM
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

5 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 20 Aug 2008, 12:17 PM
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.
0
Christian
Top achievements
Rank 1
answered on 09 Sep 2008, 09:03 AM
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?
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 09 Sep 2008, 02:19 PM
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.
0
Christian
Top achievements
Rank 1
answered on 10 Sep 2008, 08:20 AM
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
0
Tsvetie
Telerik team
answered on 16 Sep 2008, 06:58 AM
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.
Tags
Splitter
Asked by
Christian
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Christian
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or