Problem resizing nested pane columns after parent splitter changes

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    60 posts
    Member since:
    Mar 2012

    Posted 09 May 2013 Link to this post

    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:

    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.
  2. Dimo
    Dimo avatar
    8486 posts

    Posted 10 May 2013 Link to this post

    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.

    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top