How to get LayoutPanelItem object from closing event parameter

[david]

I’m trying to implement the closing event handler, and get the closed tab ids.
layout = [
{
type: ‘LayoutGroup’,
orientation: ‘horizontal’,
items: [
{
type: ‘LayoutGroup’,
items: [
{
type: ‘LayoutPanel’,
id: ‘tabPanel’,
label: ‘Input’,
tabCloseButtons:true,
items: [
{
id: 1,
label: ‘TextBox Tab’,
content: ”,
},
{
id: 2,
label: ‘Slider Tab’,
content: ”,
},
],
size: ‘50%’,
},
],
orientation: ‘vertical’,
size: ‘50%’,
},
],
},
];
this.dockingLayout.addEventListener(‘closing’, (event: Event) => {
const customEvent = <CustomEvent>event;
console.log(customEvent);
//LayoutPanel with multiple tabs closed
if (event.srcElement.items) {
event.srcElement.items.forEach((tab: any) => {
console.log(tab.id);
});
} else {
//LayoutPanelItem closed, singular tab
//event.tabId?
}
});
If I close the panel named “Input”, I can get the tab objects from the event parameter (event.srcElement.items).
If I close individual tabs, I cannot find the closed tab’s id from the event parameter.
Also, srcElement is deprecated, is there another way to get the LayoutPanel object and its items?
Thank you

[david]

I found a possible solution but it is a bit convoluted:
event.path[4].items[event.detail.index].id
The path[4] is the LayoutPanel which contains the closing tab.

[yavordashew]

Hi David,
From your last post I suggest you want to get the tab index when the tab fire the event closing.
You achieve this in a bit more convenient way :

 this.docking.addEventListener('closing', (event: Event) => {
            const customEvent = <CustomEvent>event;
            console.log(customEvent.detail.index);
})

Hope this solution suits you!
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