JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › How to get id’s of type LayoutPanelItem during closing event
- This topic has 4 replies, 2 voices, and was last updated 3 years ago by Lukac.Jozef.
-
AuthorPosts
-
October 25, 2021 at 8:37 am #102470Lukac.JozefParticipant
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.
October 25, 2021 at 1:23 pm #102471Yavor DashevParticipantHi 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 DashevSmart UI Team
https://www.htmlelements.com/October 28, 2021 at 5:22 am #102472Lukac.JozefParticipantHello 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.
October 29, 2021 at 12:01 pm #102473Yavor DashevParticipantHi 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 DashevSmart UI Team
https://www.htmlelements.com/November 3, 2021 at 12:16 pm #102490Lukac.JozefParticipantHi 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 3 years ago by Lukac.Jozef.
-
AuthorPosts
- You must be logged in to reply to this topic.