JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Docking Layout How to get id’s of type LayoutPanelItem during closing event

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102470
    Lukac.Jozef
    Participant

    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.

     

    #102471
    Yavor Dashev
    Participant

    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/

    #102472
    Lukac.Jozef
    Participant

    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.

     

     

    #102473
    Yavor Dashev
    Participant

    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/

    #102490
    Lukac.Jozef
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.