Close one tabbed docked window

[peter.jak]

Hello
Once multiple panels are docked together within one tab, how can I close just one tab (without undocking)?
Right now I’m able to close just whole <span class=”str”>LayoutGroup with all tabbed panels.</span>
 
Thanks
Peter

[yavordashew]

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/

[peter.jak]

Hello Yavor
Thank you very much for your answer. It’s working.
But there is still one issue. Once I want to save the layout with getJSONStructure() the tabCloseButtons is not saved.
So after I reload the docking layout the tabCloseButtons is lost. Could you have a look at it?
 
Thanks
Peter

[yavordashew]

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/

[peter.jak]

Hello Yavor
Have a look https://stackblitz.com/edit/github-e3kfs8?file=src/app/app.component.ts once we save the layout into JSON the tabCloseButtons is lost from the json.
Best regards
Peter

[admin]

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/

[Jozef.Lukac]

Hello, We use for docking layout tab parameter tabCloseButtons: true, as was adviced here. When I press this Closing Tab button, onClose event is emmit but at @ViewChild dockingLayout.closedItems no new data arrived and I don’t know what was currently closed. May you give me some advice? Sample:
https://stackblitz.com/edit/github-e3kfs8-ynyrdj?file=src%2Fapp%2Fapp.component.ts
Best regards
Jozef

[Hristofor]

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

[Author]

Posts