Angular 6 JqxDockingLayout Content Loss while docking Floating Items

[cutterrParticipant]

Hi;

I am using jqxdockinglayout_defaultfunctionality demo but unlike on the demo when I float a Document and re-dock it at the same spot it’s content is lost.

This does not replicate for docking into different places. It only occurs if I am adding a item back to the list it belongs while it was on floating state.

As an example of the problem I am encountering I basically do the following in these pictures: Putting output panel into server explorer tab.

When I float an item it’s content is kept.

But when I dock it back to the document group it’s content is lost.

I have tracked the layout variable to see why the content was disappearing on docking event.

I realised when I dock the item back. The item in layout gets modified as following:

{type: “documentPanel”, title: “Document 1”, contentContainer: “Document1Panel”, index: 0, selected: true}
{type: “documentPanel”, title: “Document 1”, index: 3, detachedContent: Array(1), docked: true}

The detached content holds my button but since it is no longer in contentContainer the content cannot be displayed.

I don’t know where I messed up & couldn’t find any documentation about the problem.

Here is the project. I have imported all the necessary node modules only visible error I’m having is image file errors.
(Note: This file doesn’t contain node modules but there is a already builded version on dist folder which can be used to replicate the problem.
Clicking on “clean” button should paste the ‘layout’ object from jqxdockinglayoutcomponent. I can upload node_modules file as well if requested I didn’t wanted to make the file 100+MB.)

https://ufile.io/bgjel

Edit:If images are not visible; they can be opened by right click->Open on new tab

[cutterrParticipant]

Update:

I have found out if I call jqxdockinglayout methods: render() and refresh() by force when I lose the content inside boxes I can make them visible again. But do I need to call them on every event of jqxdocking layout? Is there a way for angular_jqxdockinglayout.ts to call it’s own functions instead on every change?

Also I couldn’t find a @output event for moving the documents on sliders without floating them.

[MartinParticipant]

Hello cutterr,

Yes, you should call the render and refresh methods. They cannot be called on their own.

Can you, please, explain more in details what output event you are asking about?
Thank you!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[cutterrParticipant]

Hello Martin;

Thank you for responding back.

Here is a picture of the event I was asking about.

[IMG]http://i63.tinypic.com/2dslssz.png[/IMG]

I can also explain it in detail but an image should be much more clear.

When I slide “document1” on the “documentGrouptab” to switch it’s position with “document2” on the tab I don’t know which of the following outputs can I use for that.

   @Output() onCreate = new EventEmitter();
   @Output() onDock = new EventEmitter();
   @Output() onFloatGroupClosed = new EventEmitter();
   @Output() onFloat = new EventEmitter();
   @Output() onPin = new EventEmitter();
   @Output() onResize = new EventEmitter();
   @Output() onUnpin = new EventEmitter();

[MartinParticipant]

Hello cutterr,

There isn’t such a built-in event for sliding the documents.
You can try binding to the the mouseup event of the .jqx-layout-ribbon-header class element and check if its child elements are shifted,
so then you would emit your output event.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[MichaelzhangParticipant]

Hello cutterr,

Have you solved your problem? If yes, please share your solution. Thanks!

[Author]

Posts