JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Docking Layout How to get LayoutPanelItem object from closing event parameter

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #101625
    david
    Member
    Up
    0
    Down

    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

    #101626
    david
    Member
    Up
    0
    Down

    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.

    #101630
    yavordashew
    Member
    Up
    0
    Down

    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/

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