jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts

  • frankmms
    Participant

    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>
    
Viewing 1 post (of 1 total)