I am missing a client resize event for the splitter.
The websplitter contains events for SplitBarPositionChanged and Collpase/Expand events. I use these events to resize 1 or 2 ultrawebgrids positioned in a SplitterPane. However when the user resizes the browser window the splitter resizes the panes. however I don't see a splitter event that I can use to resize my grids. I use the window.resize event, but that doesn't work, because sometimes the splitter resizes after I have tried to resize my grids.
Do you have a solution?
Hi,
ClientEvent expose events related to splitter, but not events related to events triggered by external control (like parent of splitter). The splitter has public member layout() which called when control is resized or application wants to resize control. So, in theory you may hack into splitter and filter that method (no support in case of misbehavior).
Below is example:
<script type="text/javascript">function initSplitter(splitter){ splitter._oldLayoutMember = splitter.layout; splitter.layout = function(width, height) { this._oldLayoutMember(width, height); raiseMyLayoutEvent(splitter); }}function raiseMyLayoutEvent(splitter){ alert("splitter was resized");}</script>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="133px" Width="50%"> <Panes> <ig:SplitterPane runat="server"></ig:SplitterPane> <ig:SplitterPane runat="server"></ig:SplitterPane> </Panes> <ClientEvents Initialize="initSplitter" /></ig:WebSplitter>
I am using a vertical splitter .... while resizing with the splitter towards left side the left pane gridview is visible out of the splitter. That is it is not fitting witin the left pane. Any code help for this please.
Hi Wishnu,
A child html element may appear outside its container if it has position:relative/absolute. In order to prevent that, the container also should have that attribute.
By default the WebSplitter uses default (flow layout) positions for all its html elements, but grid uses relative position for its html elements. So, if grid is larger than size of SplitterPane, then it may appear outside of its container. To handle that, application should enable the SplitterPane.EnableRelativeLayout property, which was designed exactly for similar situation.
Hi Wisnu,
The splitter does not raise events when size of a pane was changed. I raises events when splitter bar was moved and when panes were collapsed and expanded. Below is example:
<script type="text/javascript">function sizeChanged(sender, splitterArgs){ var next = splitterArgs.get_nextPane(); var prev = splitterArgs.get_prevPane(); window.status = next.get_index() + ":" + next.get_size() + " " + prev.get_index() + ":" + prev.get_size();}function stateChanged(sender, splitterArgs){ var pane = splitterArgs.get_pane(); var affPane = splitterArgs.get_affectedPane();}</script>
<ig:WebSplitter ...>
<ClientEvents Expanded="stateChanged" Collapsed="stateChanged" SplitterBarPositionChanged="sizeChanged" /></ig:WebSplitter>
Hi Viktor,
While resizing with the websplitter towards right side the pane contents should shrik
Any relevant events there ...Could you give some code help for that....