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>
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.
Hi Vaysa,
it works great. I think it is already marked as answer.
Cheers Uwe
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.