Hi,
is it possible to resize the the splitter panes so that the size of each is 50%. Or - with other word - the splitter bar is right in the middle.
This will be great!.
Thx
Uwe
Hi Uwe,
If you are asking about initial size of splitter with 2 panes, then size of 50% is default. In case of more panes, default initial sizes of panes are proportional. For example, in case of 4 panes, each of them will have 20%.
You also may set initial size explicitly to any desired vaue (% or px). In case of 2 panes, you may set specific size of any of them. The size of the other pane will be adjusted automatically.<ig:WebSplitter ID="WebSplitter1" runat="server" Height="300px" Width="90%"> <Panes> <ig:SplitterPane runat="server" Size="50%"><Template>...</Template></ig:SplitterPane> ...
Though, you should keep in mind that % size is not supported at run time, but only on initial load/rendering. In order to support permanent dynamic % sizes of panes, application should process browser events (like onresize) which affect size of splitter and adjust sizes of panes manually. It is not possible to build such functionality as a built-in feature, because instant sizes of panes depend on various conditions like multiple panes, collapse/expand actions, resizing panes by end user, etc.
If panes are not movable by end user and application needs to keep permanent % ratio, then it can do following:<script type="text/javascript"> function onLoad() { window.onresize = function () { var splitter = $find('WebSplitter1'); var pane = splitter.get_panes()[0]; var width = splitter.get_element().offsetWidth; pane.set_size(width / 2); } }</script><body onload="onLoad()">If application needs to maintain % ratio including last position modified by end user, then it should besides codes above, process change events of bar-position and save last ratio. Below is example:<script type="text/javascript"> function WebSplitter1_SplitterBarPositionChanged(sender, eventArgs) { var pane0_size = sender.getPaneAt(0).get_size(), pane1_size = sender.getPaneAt(1).get_size(); sender._lastRatio = pane0_size / (pane0_size + pane1_size); } function onLoad() { window.onresize = function () { var splitter = $find('WebSplitter1'); var pane = splitter.get_panes()[0]; var width = splitter.get_element().offsetWidth; var ratio = splitter._lastRatio || 0.5; pane.set_size(width * ratio); } }</script><body onload="onLoad()">
We are still following your case.
Please do not hesitate to contact us if you have any additional questions regarding this matter.
Hi, sorry for reply a litle late!
No i still struggle with that in my scenario. I try to explain:
I have a MasterPage (build from some of Microsofts templates). This contains (of course) the body tag, the scriptManager etc (nothing special at all). The "working-Page" comes with a with a WebGrid and opens (via selected Row) a WebDialog. This contains the Splitter ...
Now I would like to have the 50%/50 Ratio even when the wdw is resized (or maximized).
So only the wdw-Size changes, not the whole thing.
Btw. with the suggested solution i got a "JavaScript Runtime error - load is undefined". Did i miss some "$(document).ready(function ()" ?
I am not sure why you have problems with load in codes which I gave before. They do not use jquery ready or any other fancy stuff, but simple <body onload="onLoad()">. That should always work.
Anyway considering your last notes, you have splitter located inside of resizable dialog. In this case window.onresize will not work, because window is not a resizable-container of splitter. For any unknown container or any external size changes of container, you may use static timer/interval, though, that implementation requires good understanding of javascript. In case of WebDialogWindow-container, implementation should be easy, because dialog raises few resizing events. You may use "Resized", which is raised when resizing was finished, or you may use "Resizing". Note: in case of complex layout of splitter the usage "Resizing" to perform layout, might overwhelm calculations in javascript.
Below are codes for you. Please copy/paste them in any of your samples and test if they work as you expect. After that you may apply similar resize events for your application.
<script type="text/javascript">function WebDialogWindow1_Resized(sender, eventArgs) { var splitter = $find("<%=WebSplitter1.ClientID%>"); var pane = splitter.get_panes()[0]; pane.set_size(splitter.get_element().offsetWidth / 2);}</script><ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="300px" Height="300px"> <ContentPane> <Template> <ig:WebSplitter ID="WebSplitter1" runat="server" Width="99%" Height="99%"> <Panes> <ig:SplitterPane runat="server"></ig:SplitterPane> <ig:SplitterPane runat="server"></ig:SplitterPane> </Panes> </ig:WebSplitter> </Template> </ContentPane> <ClientEvents Resized="WebDialogWindow1_Resized" /> <Resizer Enabled="True"></Resizer></ig:WebDialogWindow>
Hello Uwe,
I am glad that you have been able to resolve your issue.
If you have any additional questions do not hesitate to contact us.
Hi Vaysa,
it works great. I think it is already marked as answer.
Cheers Uwe
I was wondering have you been able to resolve your issue?
If you are still in need of assistance please feel free to contact us, we would be glad to help.