Scheduler locked subgrid will not get the right width after expand

[marciogurka]

Forum post

"I have some problems with the subgrids of the scheduler. We have added 2 test-buttons (Button 'Collapse' and Button 'Exdand') inside the resourceHistogram toolbar. If after page load we press the Button 'Collapsed' and than press Button 'Expand' we dont get the width they are defines in the Action of Button 'Expand'. Is Expand animation set to true, the width will arived but in the moment of calling expand(...) it will reset the width. If expand animation set to false, it will not get the width.

I have add a example code for this problem.

in my project i have a simular problem, but here we get ever the width of '0px' after expand.

edit: in this example i must set the width befor the expand(...) to get a demo of the problem

Version: 6.0.5

Example: https://bryntum.com/products/schedulerpro/examples/resourcehistogram/

Example Code:

import { Splitter, SchedulerPro, ProjectModel, Toolbar, ResourceHistogram } from '../../build/schedulerpro.module.js?478281';
import shared from '../_shared/shared.module.js?478281';

//region Data

const project = window.project = new ProjectModel({
    transport : {
        load : {
            url : 'data/data.json'
        }
    },
    autoLoad : true,

// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only, so please set it to false for production systems.
validateResponse : true
});

const scheduler = new SchedulerPro({
    appendTo  : 'container',
    minHeight : '10em',
    flex      : '1 1 50%',
    stateful: false,

startDate         : new Date(2024, 3, 26),
endDate           : new Date(2024, 4, 10),
viewPreset        : 'dayAndWeek',
eventStyle        : 'plain',
tickSize          : 70,
resourceImagePath : '../_shared/images/users/',

columns : [
    { type : 'resourceInfo', text : 'Name', field : 'name', width : 150 },
    { text : 'City', field : 'city', width : 90 }
],

project,

tbar : [
    {
        ref      : 'zoomInButton',
        icon     : 'b-icon-search-plus',
        text     : 'Zoom in',
        onAction : () => scheduler.zoomIn()
    },
    {
        ref      : 'zoomOutButton',
        icon     : 'b-icon b-icon-search-minus',
        text     : 'Zoom out',
        onAction : () => scheduler.zoomOut()
    }
]
});

new Splitter({
    appendTo : 'container'
});

const histogram = window.histogram = new ResourceHistogram({
    project,
    stateful: false,
    hideHeaders       : true,
    partner           : scheduler,
    appendTo          : 'container',
    rowHeight         : 60,
    minHeight         : '10em',
    flex              : '1 1 50%',
    showBarTip        : true,
    resourceImagePath : '../_shared/images/users/',
    columns           : [
        {
            type           : 'resourceInfo',
            text           : 'Name',
            field          : 'name',
            flex           : 1,
            showEventCount : false,
            width          : 240
        }
    ]
});

new Toolbar({
    appendTo : 'container',
    cls      : 'histogram-toolbar',
    items    : [
        {
            type    : 'checkbox',
            ref     : 'showBarText',
            text    : 'Show bar texts',
            tooltip : 'Check to show resource allocation in the bars',
            checked : false,
            onAction({ source }) {
                histogram.showBarText = source.checked;
            }
        },
        {
            type    : 'checkbox',
            ref     : 'showMaxEffort',
            text    : 'Show max allocation',
            tooltip : 'Check to display max resource allocation line',
            checked : true,
            onAction({ source }) {
                histogram.showMaxEffort = source.checked;
            }
        },
        {
            type    : 'checkbox',
            ref     : 'showBarTip',
            text    : 'Enable bar tooltip',
            tooltip : 'Check to show tooltips when moving mouse over bars',
            checked : true,
            onAction({ source }) {
                histogram.showBarTip = source.checked;
            }
        },

    // DEMO:
    // 1.) click Button 'Collapse'
    // 2.) click Button 'Expand'
    {
        type: 'button',
        text: 'collapse',
        onAction({ source }) {
            console.log('collapsed');
            scheduler.subGrids['locked'].collapse(true);
        }
    },
    {
        type: 'button',
        text: 'expand',
        onAction({ source }) {
            console.log('expand');

            // if we set as first the width and collapse after this, 
            // than will the width of Subgrid reseted
            scheduler.subGrids['locked'].width = 500;
            scheduler.subGrids['locked'].expand(true);
        }
    }
]
});

"

https://github.com/user-attachments/assets/afaa048b-5e54-481d-89fb-508900c40426