Problem resizing nested pane columns after parent splitter changes

[Ryan]

I've subscribed to the layoutChange event on the parent splitter. It appears that this event is fired too early. I have a splitter that I only wish to see four columns at a time. This work's fine for initial display. Once the parent splitter is resized things become inaccurate.

I've created a fiddle to demonstrate the issue: http://jsfiddle.net/jjKb5/

The bigger the pane resize, the more inaccurate the widths are during the time of layoutChange. I don't want to have to resort to using setTimeout. Any suggestions for a solution? Is this considered a splitter bug?

I find it slightly annoying that the splitter.size method can only applies the action to a single pane even if multiple elements are returned by the selector. That forces me to do this instead:

$panesToResize.each(function (idx, el) {
    splitter.size($panesToResize.eq(idx), colWidth);
});

P.S. - I know some of this code might seem overkill. Using % widths is a much simpler solution however with large pane widths the leftover pixels from a percentage difference (100 / 7) is much larger than calculating the new pixel widths on each resize.

[Dimo]

Hi Ryan,

Using setTimeout is inevitable in your case, because the inner splitters also listen to the parent Splitter's layoutChange event and readjust their layout accordingly. Currently onLayoutChange is executed
before the inner Splitters have responded to the parent Splitter pane resize and the calculations are naturally wrong.

The whole content of the onLayoutChange function need to be enclosed in setTimeout.

Regards,
Dimo
the Telerik team