Activate tab over API

[Jozef.Lukac]

Hello,
We want to activate (select and focus) the tab “TAB 3” over API.

Can you give some advices?
Best regards
Jozef.

[yavordashew]

Hi Jozef,
Thank you for contacting us!
Because DockingLayout component uses the Window Component we can use its API to select the tab you want.
Quick example on how to do this:

window.onload = function () {
    const docking = document.querySelector('smart-docking-layout');
    docking.layout = [
        {
            //The Base Group
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    //DockingLayout Item B
                    label: 'TabsWindow B',
                    size: '25%',
                    items: [{
                            //Tab Item B1 of Item B
                            label: 'Tab B1',
                            selected: true,
                            id: 'clickEvent12321312',
                            content: 'Content of B1'
                        },
                        {
                            //Tab Item B2 of Item B
                            label: 'Tab B2',
                            content: 'Content of B2',
                        }],
                        id: 1,
                        tabCloseButtons: true
                },
            ]
        }
    ];
    setTimeout(() => {
        docking.items[0].select(1)
    }, 1000);

More info about this you can find in the window API here https://www.htmlelements.com/docs/window-api/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Jozef.Lukac]

Thank you Yavor,
this solution worsk at angular for tab switching.
But it works differently as selection by mouse.
This can select(tabIndex) tab correctly, however whole docking.items[dockIndex] looks not selected.

Best regards,
Jozef.

[yavordashew]

Hi Josef,
I have another code snippet for you in which we use the native focus method like so:

      that.dockinglayout.items[0].select(1)
      that.dockinglayout.items[0].focus()
     

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/

[Jozef.Lukac]

Thank you Yavor,
Yours code snippet works for us, as simple as it looks.
Regards,
Jozef.

[Author]

Posts