Hi Peter,
If you want to have closing buttons inside the tabs(multiple) which are docked in one tab you can use the ‘tabCloseButtons’ property of the docking layout like in the following code snippet:
//In your Js file:

window.onload = function () {
    const docking = document.getElementById('docking-layout')
    docking.layout = [
        {
            //The Base Group
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [{
                    label: 'TabsWindow B',
                    size: '25%',
                    items: [{
                            label: 'Tab B1',
                            selected: true,
                            content: 'Content of B1'
                        },
                        {
                            label: 'Tab B2',
                            content: 'Content of B2'
                        },
                        {
                            label: 'Tab C1',
                            content: 'Content of C1'
                        }
                    ],
                        tabCloseButtons: true,
                },
            ]
        }
    ];
};

And in your HTML file :
<smart-docking-layout id="docking-layout"></smart-docking-layout>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi Peter,
I was unable to recreate the situation you encounter, but in order to give you the best solution I would suggest to share a code example of your case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi Peter,
Thanks for the sample. The methods for saving the layout and structure of the Docking Layout actually save the layout and the structure. The saved object does not include information on whether the close buttons are enabled or similar kind of information.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

Hi Jozef,
The closedItems property of the Smart.DockingLayout returns the instances of the LayoutPanels that have been closed. A LayoutPanel is one of the main structural components of the Smart.DockingLayout and represents a Smart.TabsWindow component that contains TabItems. When clicking the close button of a TabItem you are closing a single TabItem inside the LayoutPanel and a close event is fired. The close event is also fired when a LayoutPanel is closed so you need to check the even.target to determine the cause for the event. The close event that is fired when a TabItem is clicked comes from the Smart.Tabs component which is part of the LayoutPanel and contains a event.detail object that holds the tab item index of the closed item.
Since the LayoutPanels are actually Smart.TabsWindow components they provide the same API as Smart.Tabs component for Tab items modification. For example you can add/remove/update any TabItem inside the LayoutPanel via the following syntax:

const dockingLayout = document.querySelector('smart-docking-layout'),
layoutPanels = dockingLayout.items,
firstPanel = layoutPanels[0];
//If the first panel has more than one tab item you can close one of them
const tabItems = firstPanel.items;
firstPanel.close(tabItems[0]);
//or insert a new tab item
firstPanel.insert(1, { label: 'New Tab item', content: 'Content ...' });

You can read more about Smart.TabsWindow API in the following tutorial.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com