Hi,
I saw the following link... and its useful
http://samples.infragistics.com/2008.2/webfeaturebrowser/default.htm Aikido->Nested Panes and More
But i like to know while moving the vertical splitter towards left side...how can i stretch the left pane contents...instead of providing a scrollbar either way... Code help please...
Hi Wishnu,
The easiest approach is to use % width/height of html elements/controls located in SplitterPane. In this case a browser will do all "stretch" for you.
If you prefer manual adjustments, then you may process ClientEvents.SplitterBarPositionChanged, get references to affected panes, their DIV containers, old/new sizes, etc. So, you may use those value to adjuct bounds of all child elements in those panes. Below is example:
function positionChanged(splitter, evtArgs){ var pane1 = evtArgs.get_nextPane(); //get_prevPane(); var div1 = pane1.getBody(); var clientWidth = pane1.getClientWidth(); var newSize1 = evtArgs.get_nextPaneNewSize(); ...}
Can you give a complete/full example please... Just place some simple controls inside the pane and give an example of events to stretch the pane contents...
Regards,
Wishnu
Below example will adjust width of child <div> and asp:Button located on second pane with 10px margin on right.
<script type="text/javascript">function splitter1_load(splitter, evtArgs){ adjustPane2(splitter.get_panes()[1]);}function splitter1_posChange(splitter, evtArgs){ var pane = evtArgs.get_nextPane(); if(pane.get_index() != 1) pane = evtArgs.get_prevPane(); if(pane.get_index() == 1) adjustPane2(pane);}function adjustPane2(pane){ var body = pane.getBody(); var div = $get('divOnPane2'); if(div) div.style.width = (body.offsetWidth - 10) + 'px'; var button = $get('<%=Button1.ClientID%>'); if(button) button.style.width = (body.offsetWidth - 10) + 'px';}</script>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="120px" Width="500px"> <Panes> <ig:SplitterPane runat="server"></ig:SplitterPane> <ig:SplitterPane runat="server"> <Template> <asp:Button ID="Button1" runat="server" Width="50px" Text="Button" /> <div id="divOnPane2" style="background:red;width:100px;">MarginRight:30px</div> </Template> </ig:SplitterPane> <ig:SplitterPane runat="server"></ig:SplitterPane> </Panes> <ClientEvents Loaded="splitter1_load" SplitterBarPositionChanged="splitter1_posChange" /> </ig:WebSplitter>
Its giving error. Actually there is nothing like Loaded in the ClientEvents section. Please have two panes and in the first some calender control and while moving the splitter towards left it should stretch the calender.
The ClientEvents.Loaded was added recently. The latest hot fixes should contain that event. If you update NetAdvantage, then that should work. Otherwise, you should remove that event from processing. I gave that it as somethig extra, which is beyond your question about adjustments while resizing. If your WebSplitter is always visible, then you may replace Loaded by Initialized. If that will not work, then do not use Initialize, but adjust initial layout of child controls on server.