jQWidgets Forums
Forum Replies Created
Viewing 1 post (of 1 total)
-
Author
-
October 15, 2019 at 12:18 am in reply to: jqxDockingLayout add remove documentPanel jqxDockingLayout add remove documentPanel #107008
Hello 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>
-
AuthorPosts
Viewing 1 post (of 1 total)