Lock\disable a docking LayoutPanel from being resized

[admin]

Hello, I would like to set a docking LayoutPanel to be a specific size and then lock/disable it from being resized. Here is what I’ve tried so far:
`docking.layout = [
{
type: ‘LayoutGroup’,
orientation: ‘horizontal’,
items: [
// Header
{
label: ‘Header’,
size: 100,
min: 100,
max: 100,
locked: true,
tabPosition: ‘hidden’,
items: [{
label: ‘Header’,
content: ‘Header Content’,
}]
},
// Main content
{
type: ‘LayoutGroup’,
orientation: ‘vertical’,
items: [
{
label: ‘Main’,
size: ‘50%’,
items: [{
label: ‘Main’,
content: ‘Main Content’
}]
},
]
},
]
}];`
However, I’m still able to resize the Header vertically using the Splitter. The code does not appear to be honoring the min, max, and locked field values. How can I lock down the Header so that it cannot be resized vertically using the Splitter?

[admin]

Hi velocitytoo,
your code is correct. However setting the “max” and “locked” properties on element initialization are not being applied as expected. This will also be fixed in the next release.
You can still set those properties after element initialization directly on the LayoutPanel item. For example:

docking.items[0].locked = true;
docking.items[0].max = 300;

If you have set an id to the LayoutPanel you can also target it via document.getElementById(id).
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

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?

[admin]

The docking layout update() method does not appear to be working either. I added the code below at the end of my first code snippet above, and the ‘Header’ LayoutPanel title and content are not updated after the update method is called:
`setTimeout(function () {
docking.update(0,
{
label: ‘Header 2’,
type: ‘LayoutPanel’,
size: 100,
min: 100,
max: 100,
locked: true,
items: [{
label: ‘Header 2’,
type: ‘LayoutPanelItem’,
content: ‘Header Content 2’,
}]
});
}, 5000);`
I assume the index parameter to the update() method is 0-based; I tried ‘1’ for the index, but that did not work either. Please let me know if I am doing something wrong.

[admin]

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

[Author]

Posts