JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Moved tab lost tabCloseButtons
- This topic has 3 replies, 3 voices, and was last updated 3 years, 4 months ago by
admin.
-
AuthorPosts
-
April 23, 2021 at 9:04 am #101734
Jozef.Lukac
MemberHello,
We have enabled for each tab parameter tabCloseButtons. This works well almost for all use cases. We facing with problems when tab is drag and drop to some side of whole docking layout and there is docked at the new dock. Happen then two issues for us:
1. dock repeat header from tab,
2 missing tab close button.
See attached picture. Can you give some advices?
Best Regards
JozefApril 23, 2021 at 11:39 am #101737yavordashew
MemberHi Jozef,
By default when you drag and drop a panel item inside the DockingLayout, a new Panel is created and the dragged item is placed inside. Since the new Panel belongs only to that item, the label of the Panel is set to match the label of the dragged item.
Regarding the missing tabs close button on the newly created Panel from the dragged item, that is an issue that we will be fixing for our next release which is expected in the end of this month.
Also we have a solution on how to achieve the functionality you want to.const dockinglayout = document.querySelector('smart-docking-layout'); dockinglayout.addEventListener('stateChange', function (event) { const detail = event.detail; if(['dock', 'float'].indexOf(detail.type) > -1 && detail.item.items.length === 1){ event.detail.item.label= ''; event.detail.item.tabCloseButtons=true; } })
We use the ‘stateChange’ event to add an empty string label to the item and to add the close button for the tab.
Also we check if the event is ‘float’ or ‘dock’ because these are responsible for drag and drop and we also check if this is a new tab because if we don’t have this check a window which has a header with some text it will be set it to empty string.
Let me know if that works for you and thank you for your feedback!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/April 30, 2021 at 9:44 am #101774Jozef.Lukac
MemberHi Yavor,
today I use your adviced solution, it works well for us, it resolve both issues.
I try smart-webcomponents-angular 9.3.33, I can still there reproduce missing tab closing button.
Thank You for help,
Best regards
Jozef.April 30, 2021 at 2:05 pm #101775admin
KeymasterHi Josef,
There is not an official release available. Once we release it, information will be available on our blog, homepage, facebook and twitter.
Regards,
Peter
Smart UI Team
Htmlelements.com -
AuthorPosts
- You must be logged in to reply to this topic.