Programmatically inserted LayoutPanelItems are not draggable

[david]

Hi,
I’m writing a a Docking Layout in Angular and want to create LayoutPanelItems in an existing LayoutPanel.
https://www.htmlelements.com/forums/topic/add-new-tab-in-existing-panel/
I tried both methods here, the created tab is not draggable (even after adding draggable:true)
If I create it with insertBeforeItem/insertAfterItem which are mentioned in the angular documentation, they are draggable, but in that case I cannot insert them into an existing LayoutPanel, since both of these methods only accept number indexes so I cannot address LayoutPanels by string id.
This is another problem since the documentation and .ts file declarations say that insertBeforeItem/insertAfterItem accepts string and HTMLElements as well, not just number indexes.
<div> New Item not draggable:</div>

const defaultLayoutPanel=this.dockingLayout.items[0];
<div>
<div> defaultLayoutPanel.insert(0, {</div>
<div>          label: 'New Item',</div>
<div>          content: 'New Tab Item Content',</div>
<div>          draggable: true,</div>
<div>          floatable:true</div>
<div>        });</div>
</div>

New Item draggable:
`
<div>
<div>    this.dockingLayout.insertBeforeItem(0, {</div>
<div>      type: ‘LayoutPanel’,</div>
<div>      label: ‘Default’,</div>
<div>      items: [</div>
<div>
<div>{</div>
<div>          label: ‘New Item’,</div>
<div>          content: ‘New Tab Item Content’,</div>
<div>          draggable: true,</div>
<div>          floatable:true</div>
<div>        }</div>
</div>
<div>],</div>
<div>    });</div>
</div>

[yavordashew]

Hi david,
If in your case you can’t use number index you can add new items with native Javascript methods such as unshift() or push () and this way is perfectly fine because our components are made purely with vanilla JS.
I have made a little code example on how to do it:

export class AppComponent implements AfterViewInit {
	 @ViewChild('docking', { read: DockingLayoutComponent, static: false }) docking: DockingLayoutComponent;
   tabsWindowObject = {
    label: 'New tab Item',
    size: '25%',
    items: [{
        label: 'New INSERTED Item',
        content: 'New INSERTED Item Content'
      }]
    }
    layout = [
        {
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    type: 'LayoutGroup',
                    items: [
                        {
                            type: 'LayoutPanel',
                            id: 'tabPanel',
                            label: 'Input',
                            items: [{
                                label: 'TextBox Tab',
                                content: ''
                            },
                            {
                                label: 'Slider Tab',
                                content: ''
                            }],
                            size: '50%'
                        },
                        {
                            type: 'LayoutPanel',
                            label: 'Output',
                            items: [
                                {
                                    id: 'outputTab',
                                    label: 'Output',
                                    headerPosition: 'none',
                                    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
                                }
                            ]
                        }
                    ],
                    orientation: 'vertical',
                    size: '50%'
                },
                {
                    id: 'item0',
                    label: 'Tabs 0',
                    items: [{
                        label: 'Tab A',
                        selected: true,
                        content: 'What is Lorem Ipsum?\n' +
                            'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of' + 'type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in ' + 'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n' +
                            'Why do we use it?\n' +
                            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal ' + 'distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their' + 'default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on ' + 'purpose (injected humour and the like).'
                    }]
                }]
        }];
	ngAfterViewInit(): void {
    this.init();
  }
  init(): void {
    const smartDockingLayout: DockingLayoutComponent = this.docking as DockingLayoutComponent;
    smartDockingLayout.layout[0].items[0].items.push(this.tabsWindowObject)
    smartDockingLayout.layout.unshift( this.tabsWindowObject)
  }
} 

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[david]

Hi Yavor
I tried your solution and strangely it only works partially.
ngAfterViewInit(): void {
//A
const smartDockingLayout: DockingLayoutComponent = this.docking as DockingLayoutComponent; smartDockingLayout.layout[0].items[0].items.push(this.tabsWindowObject)
this.tabService.tabsChanged$.subscribe((t) => {
//B
const smartDockingLayout: DockingLayoutComponent = this.docking as DockingLayoutComponent; smartDockingLayout.layout[0].items[0].items.push(this.tabsWindowObject)
})
}
I have an obserable, and if it changes I add a new tab based on the changes.
I marked the two cases, ‘A’ works properly. ‘B’ works if it triggers immediately when I subscribe to the observable. But when I trigget the observable later, the layout changes and the tab is in there (console.log verifies this) but the docking layout UI won’t update with the new tab.
I also tried:
ngAfterViewInit(): void {
setInterval(()=>{
const smartDockingLayout: DockingLayoutComponent = this.docking as DockingLayoutComponent; smartDockingLayout.layout[0].items[0].items.push(this.tabsWindowObject)
})
}
And this won’t work either, the new tab is not visible on the ui, but it is in the ‘smartDockingLayout.layout’ if I log it.
 

[yavordashew]

Hi David,
It will be the best to share a complete code example of your situation if we are to be able to give a solution for this problem.
But from the code you shared I can advise you to check if you use the push method into the correct Array of items.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts