Hi Christopher,
Where would you recommend to put the code you recommend above in our app? I tried putting it right after the statement assigning docking.layout (by iterating over docking.items), but that did not fix the issue. Is there an event we should hook and put the code in that location?

Hi velocitytoo,
custom element configuration should be applied during the window.onload stage or later. In this case since we are making changes to an item that is expected be present in the DockingLayout at the time of update, the new settings should be set after the item initialization via the layout property:

  window.onload = function () {
            const docking = document.querySelector('smart-docking-layout');
            docking.layout = [
                {
                    type: 'LayoutGroup',
                    orientation: 'horizontal',
                    items: [
                        // Header
                        {
                            id: 'headerItem',
                            label: 'Header',
                            size: 200,
                            //max: 200,
                            //locked: true,
                            tabPosition: 'hidden',
                            items: [
                                {
                                    label: 'Header',
                                    content: 'Header Content'
                                }
                            ]
                        },
                        //Main Content
                        {
                            type: 'LayoutPanel',
                            orientation: 'vertical',
                            label: 'Main',
                            items: [
                                {
                                    label: 'Main',
                                    size: '50%',
                                    items: [
                                        {
                                            label: 'Main',
                                            content: 'Main Content'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ];
        //Setting 'max' using the id of the item
        document.getElementById('headerItem').max = 200;
        //Or setting 'locked' via DokcingLayout's API
        docking.items[0].locked = true;
        //Method invocation - update(index, object)
        docking.update(0, { size: 200, max: 200, locked: true });
        }

Remember to remove the ‘size’ and ‘locked’ properties from the initial configuration. If not removed and the same settings are passed later ( same properties with same values) a property change will not be trigged since the same settings are applied again. This is probably why the update invocation did not work either for you, because the same settings have already been applied. Keep in mind that update method is used only for updating existing LayoutPanels with existing TabItems. So if you want to update a LayoutPanel item and it’s TabItem at the same time then the following should work:

docking.layout = [
                {
                    type: 'LayoutGroup',
                    orientation: 'horizontal',
                    items: [
                        // Header
                        {
                            id: 'headerItem',
                            label: 'Header',
                            size: 100,
                            tabPosition: 'hidden',
                            items: [
                                {
                                    label: 'Header',
                                    content: 'Header Content'
                                }
                            ]
                        },
                        //Main Content
                        ...
                    ]
                }
            ];
//Updating the LayoutPanel item with index 0 and it's TabItem with index 0
docking.update(0, { size: 200, max: 300, locked: true, items: [ index: 0, label: 'Updated Header', content: 'Updated Content' ] });

The update method accepts two arguments:

• index – should be a numeric index of the target item, it’s id as string or a direct instance of the target item. Using the getter items a list of all items can be gathered.
• object – an object containing the new properties and values.

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com