jQuery UI Widgets › Forums › Layouts › Layout and Docking Layout › jqxDockingLayout add remove documentPanel
Tagged: add, add panel, addFloatGroup, allowClose, close panel, docking layout, documentPanel, dynamically, float, floatGroup CSS, floatGroup styling, floatGroup theme, initContent, jqxDockingLayout, remove, solution, Theme
This topic contains 32 replies, has 15 voices, and was last updated by admin 2 years, 9 months ago.
-
Author
-
Sorry I’ve forgot, I don’t know if this happened only with me , but for example I have 3 grids with filterrow on different documentPanels, of course different objects. Somehow the first grid filters works great, the other 2 the filter input does not have the bind attached … I had to call jqxGRid(‘clearfilters’) after bindingcomplete in order to re bind and make it work …
Hello sd#j.prizal,
Please note that all widgets (including jqxGrid) have to be displayed in order to be properly initialized. When initializing widgets inside jqxDockingLayout panels, you need to do so in the respective panel’s initContent callback function. This ensures the widget containers are displayed before attempting to initialize them. The initContent function can be seen implemented in most jqxDockingLayout demos, such as IDE-like Layout.
We also recommend only calling the documented public methods of jqxDockingLayout, as using any internal API can cause unexpected behaviour.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello,
when do you think the errors on your DockingLayout/Layout will be corrected? Is it on your roadmap in the near future.
allowClose: don’t realy work
unpinnedWidth: has no effect.Regards,
DirkHello Dirk,
- Here is a jqxDockingLayout example with allowClose set to false for all panel groups: https://www.jseditor.io/?key=jqxdockinglayout-allowclose. As a result, none of them can be closed. Please note that there is a difference in the behaviour of allowClose in jqxLayout and jqxDockingLayout. In jqxLayout, groups cannot be closed by default and allowClose has to be set explicitly to true while the opposite is correct for jqxDockingLayout. This has been documented in the widgets’ respective API documentations.
- unpinnedWidth sets what the width of an autoHideGroup will be after it is unpinned. In above example, the autoHideGroup with “Toolbox” and “Help” becomes 200 pixels wide after unpinning, because unpinnedWidth is set to 200.
If you experience any issues with these functionalities, please share them. Your feedback is welcome.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/If you extract a panel and transform it in floating panel, the X close button appear…
Any tips to hide it?Hello dadiduekappa,
Unfortunately, this cannot be achieved currently. We are sorry for the inconvenience.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Ok, so we can deny to extract a panel to make it floating? And also, can we block some deploying position?
Hello dadiduekappa,
Unfortunately, neither of these options are available. All available group and panel settings are listed under the layout entry of the jqxDockingLayout API documentation.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello,
Is there any update on this topic? I keep reading the thread and I cannot believe that tabs cannot be added/removed dynamically…Regards
Hello qadram,
Unfortunately, the jqxDockingLayout has the same behavior as before.
You could add some new group with the “addFloatGroup” method and after that set it whatever you want.
If you describe what you want to achieve maybe we could suggest some solution.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHello devs,
I can implement a way to add documents dynamically. Following is the code in Vue.js:
<template> <div> <button @click="createNewDocument">Add Document</button> <JqxDockingLayout ref="dockingLayout" :height="400" :layout="layout"> <div data-container="Document1Pane0"> Testing Document Add </div> </JqxDockingLayout> </div> </template> <script> import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue"; export default { components: { JqxDockingLayout }, data: () => ({ layout: [{ type: 'layoutGroup', orientation: 'vertical', width: '60%', items: [{ type: 'documentGroup', height: '100%', minHeight: '25%', items: [{ type: 'documentPanel', title: 'Document 0', contentContainer: 'Document1Pane0' }] }] }] }), methods: { createNewDocument() { var documentGroupLayout = this.findDocumentGroup(this.layout) var jqxComponent = JQXLite(documentGroupLayout.widget) var newItemIndex = documentGroupLayout.items.length var newDocumentPanelOptions = { type: 'documentPanel', title: 'New Doc ' + newItemIndex, content: 'New Document <b>Body</b> - ' + newItemIndex, parent: documentGroupLayout, index: newItemIndex } documentGroupLayout.items.push(newDocumentPanelOptions) jqxComponent.jqxRibbon('addAt', newItemIndex, newDocumentPanelOptions) jqxComponent.jqxRibbon('selectAt', newItemIndex) }, findDocumentGroup(items) { for (let item of items) { if (item.type == 'documentGroup') { return item } if (item.items != null) { var itemFound = this.findDocumentGroup(item.items) if (itemFound) { return itemFound } } } } } }; </script>
Hello frankmms,
Yes, it is a possible solution.
Also, if you do not have any error message in the console.
Please, let me know if you need assistance.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHello.
https://www.jqwidgets.com/community/topic/jqxdockinglayout-add-remove-documentpanel/page/2/#post-107008
I was able to add documentPanel by referring to.However, since the contextMenu is not displayed in the added documentPanel, the documentPanel cannot be closed.
What should I do?
Hello hayato,
The example mentioned above is a workaround.
I suggest you use the internal methods for the jqxDockingLayout.
For this case, if you want a new panel then you should use theaddFloatGroup
method.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHello, I’m a new user of JqWidgets. I’m using Jquery interface. I’m quite pleased with knockout integration. I would like to use knockout data-bind integration for jqxForm. Is this possible? I’ve not come across any sample code that does this. Thanks for your amazing product.
-
AuthorPosts
You must be logged in to reply to this topic.