jQuery UI Widgets Forums Layouts Layout and Docking Layout jqxDockingLayout add remove documentPanel

This topic contains 28 replies, has 13 voices, and was last updated by  Hristo 8 months ago.

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author

  • sd#j.prizal
    Participant

    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 …


    Dimitar
    Participant

    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,
    Dimitar

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


    NotAFan
    Participant

    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,
    Dirk


    Dimitar
    Participant

    Hello 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,
    Dimitar

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

    jqxDockingLayout add remove documentPanel #96974

    dadiduekappa
    Participant

    If you extract a panel and transform it in floating panel, the X close button appear…
    Any tips to hide it?


    Dimitar
    Participant

    Hello dadiduekappa,

    Unfortunately, this cannot be achieved currently. We are sorry for the inconvenience.

    Best Regards,
    Dimitar

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

    jqxDockingLayout add remove documentPanel #97022

    dadiduekappa
    Participant

    Ok, so we can deny to extract a panel to make it floating? And also, can we block some deploying position?


    Dimitar
    Participant

    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,
    Dimitar

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

    jqxDockingLayout add remove documentPanel #103988

    qadram
    Participant

    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

    jqxDockingLayout add remove documentPanel #104080

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

    jqxDockingLayout add remove documentPanel #107008

    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>
    
    • This reply was modified 9 months ago by  frankmms. Reason: code adjustment

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

    jqxDockingLayout add remove documentPanel #107293

    hayato
    Participant

    Hello.

    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?

    jqxDockingLayout add remove documentPanel #107312

    Hristo
    Participant

    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 the addFloatGroup method.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.