How to get id’s of type LayoutPanelItem during closing event

[Lukac.Jozef]

Hello,

We dynamically load our angular components inside to docking layout item of type: LayoutPanelItem with id:nameOfOurComponent.

Currently we have no way how to find which of our components id’s are going to be closed by X button of tab or dock.

So far for onClose event We compare docking layout content before and after close, but for onClosing is no way to use it.

May you propose some ohter solution?

Regards Jozef.

 

[Yavor Dashev]

Hi Lukac.Jozef,

This functionality is possible with the onClose event and to showcase it to you I have prepared a quick code snippet for this scenario.

//in your app.component.ts
	onClose(event):void {
		let tabId= event.path[0].id;
		console.log(tabId);
	}

Also in your app.component.html:

<smart-docking-layout 
    #docking 
    [layout]="layout"
    (close)="onClose($event)"
></smart-docking-layout>

Let me know if that works for 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/

[Lukac.Jozef]

Hello Yavor,

Thank you,

this look on first attempt as resolution for our problem.

Yes it gets always id, for use case when I closing dock it return correct Id.

But not for closing over tab, it returns Id what is not at our layout.

Our sample of layout:

{
“type”: “LayoutGroup”,
“items”: [
{
“type”: “LayoutPanel”,
“id”: “tabsWindowea26“,  //generated by docking layout
“draggable”: true,
“floatable”: true,
“items”: [
{
“type”: “LayoutPanelItem”,
“label”: “LabelOfOwnComponent”,
“selected”: true,
“draggable”: true,
“floatable”: true,
“id”: “IdOfOwnComponent”  //inserted own item with own id by insertAfterItem() 
}
],
“size”: 1534,
“min”: 30,
“tabCloseButtons”: true
}
],
“orientation”: “vertical”,
“tabCloseButtons”: true
}

Closing by dock event.path[0].id return correctly dock id tabsWindowea26.

Closing by tab event.path[0].id return random id tabs6d77.

Best regards

Jozef.

 

 

[Yavor Dashev]

Hi Lukac.Jozef,

With the additional information you have provided I was able to completely understand your scenario and I confirm that the SmartDockingLayout overrides the id that you are setting with generated with its own.

I will add a work item for this scenario to work on.

However as a workaround you can use the label of the tab element in the closing event.

I have made another quick code snippet on how to get the label of the tab:

     onClosing(event):void {
        let tabElement: HTMLElement = event.path[0],
            tabLabel: HTMLElement = tabElement.querySelector('.smart-tab-label-text-container');
   
        console.log(tabLabel.innerText)
	}

<smart-docking-layout 
    #docking 
    [layout]="layout"
    (close)="onClose($event)"
    (closing)="onClosing($event)"
></smart-docking-layout>

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[Lukac.Jozef]

Hi Yavor,

your last snippet helps me to find solution for us.
We use i18n at labels therfore I should look for id only.
Our solution:

onClosing($event: any) {
const dock = $event.path[0];
const tabItems: any[] = dock.querySelectorAll('.smart-tab-item');
const tabIndex: number = $event.detail.index;

tabItems.forEach(tab => {
if (undefined === tabIndex || tab.index === tabIndex) {
console.log("closing :", tab.id);
}
});
}

Regards Jozef.

• This reply was modified 2 years, 5 months ago by Lukac.Jozef.

[Author]

Posts