Floating windows inside dock inside window

[ScottChapmanParticipant]

First, here’s the desired UI description:

The user may be reviewing content. When he finds something interesting he clicks a button to add it to the “held” content. Each content snippet is separate entity that needs to be resizable and re-arrangable relative to one another. (For example, the user may be examining two charts and wants to arrange one above the other, or maybe one next to another. Or the user may wish to shrink the charts down to see several at once. In fact in most cases the content “snippet” will be an SVG.) Normally this collection of content snippets is hidden, but the user can click a button to view all the content they’ve saved to that point.

So my thought was to make a jqxWindow that could be shown/hidden and put a jqxDocking widget inside that, then add windows to jqxDocking as the user saves content. But I’m having a few problems. See this fiddle:
http://jsfiddle.net/HpawJ/154/

1) Why does window3 appear on top of window2?
1b) Why do window3 & 4 appear in dockPanel1 in the DOM? (At least when I inspect it with Chrome’s dev tools). It looks like their DOM position is ignored and you have to specifically set the panel index to get them into something other than the first panel?
2) It seems that windows inside a docking widget are only resizable if their mode is floating?
3) It seems that for floating windows, they’re only resizable after the user has moved them?
4) Once a floating window is moved, they seem to fall outside the containing window. IE if you then move the containing window, they won’t move. And sometimes they end up invisible behind the main containing window.
4b) Worse, window1 can be dragged and dropped such that it is now “floating” and exhibits the same problem.
5) There’s no UI element to support resizing the dock panels is there? Can one programatically reset the widths? Will such a change push down automatically to the child windows?

Finally, is there a more straight-forward way to achieve my desired functionality?

Thanks for your help!

[HristoParticipant]

Hello ScottChapman,

1) They are set on default position and ‘window3’ is created after ‘window2’.
1b) After initialization some of settings in HTML are ignored.
2 & 3) ‘default’ and ‘floating’ state windows could be resized out of the docking.
2, 3 and 4) Some of used methods are with incorrect settings. You could find out more details about this in our API Documentation.
4) This scenario Docking inside in Window is not supported.
5) Maybe I do not understand right but you could use jqxWindow options to resize every one window (for ex. $('#window3').jqxWindow("height", "400px");)
Please, take a look this example, it is workaround:
http://jsfiddle.net/txhi/ny0akfqw/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ScottChapmanParticipant]

Thanks for the responses.

#5 was about resizing the docking panels programmatically–like if I wanted to make a 75/25 split maybe instead of 50/50.

Am I to understand #4 as docking all together inside a window is unsupported? Or only that floating windows inside a window is unsupported? If the former, what UI construct do you recommend, and if the latter, is there a way of preventing the user from dragging/dropping the windows in such a way that makes them floating? (My best guess for a work-around is to automatically reset the parameter after a move.)

Scott

[HristoParticipant]

Hello ScottChapman,

Unfortunately it is not possible to split programatically on 75/25 (by default it is 50/50).
This option is not thinking in creating (Docking inside in Window).
You could set draggable: false on each desirable window to prevent dragging/dropping.
I also would like to suggest you to look at the jqxDockingLayout could be useful.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ScottChapmanParticipant]

Sorry for the delay getting back to this.

Thanks for the pointer to jqxDockingLayout. I had ignored it as being just layout oriented, but the demo does imply that I might be able to make it work for what I want.

Scott

[Author]

Posts