[REACT] Set a default columnWidth and tickHeight

[info@xnew.it]

Hi Bryntum Team,

I have in my tbar the option to set the columnWidth and the tickHeight:

                        {
                            type: 'slider',
                            ref: 'columnWidth',
                            text: capitalize(t('agenda.columns_width')),
                            showValue: true,
                            min: 50,
                            max: 300,
                            value: 'up.resourceColumnWidth',
                            onInput({ value }) {
                                console.log(value);
                                const scheduler = schedulerRef.current?.instance;

                            const fitWidgetMap =
                                scheduler.widgetMap.fitButton?.menu.widgetMap ||
                                {},
                                fitNoneButton = fitWidgetMap.none,
                                fitFillButton = fitWidgetMap.fill,
                                fitFitButton = fitWidgetMap.fit;

                            if (fitNoneButton) {
                                fitNoneButton.checked = true;
                                fitFillButton.checked = false;
                                fitFitButton.checked = false;
                            }
                            scheduler.resourceColumns.fitWidth = scheduler.resourceColumns.fillWidth = null;
                            scheduler.resourceColumns.columnWidth = value;
                        }
                    },
                    {
                        type: 'slider',
                        ref: 'tickHeight',
                        text: capitalize(t('agenda.rows_height')),
                        showValue: true,
                        min: 20,
                        style: 'margin-top: .5em',
                        value: 'up.tickSize',
                        onInput({ value }) {
                            console.log(value);
                            const scheduler = schedulerRef.current?.instance;
                            // To allow ticks to not fill height
                            scheduler.suppressFit = true;
                            // Set desired size
                            scheduler.tickSize = value;
                        }
                    }

I would like to save the value in my local storage in order to set it as column and row size next time I open my scheduler.

I can't find where I save this value in my config. Every time I open it, there is scaling according to my device size. How can I handle it?

Thanks for your help.

[marcio]

Hey info@xnew.it,

I believe you're looking for https://bryntum.com/products/scheduler/docs/api/Core/state/StateProvider

With StateProvider you're able to save in the localstorage the configuration, and from there load it to your scheduler.

After you set up the state provider, you can just use this function to save the state that you desire https://bryntum.com/products/scheduler/docs/api/Core/mixin/State#function-saveState

[info@xnew.it]

Hi Marcio,

thank you so much for your help.
In the end I found a good solution using the checkbox "fit width" and "no fit" to resize the columns.
I moved the both checkobox inside the layout menu. Only problem that I can't fix is to unchecked the "fit width" and checked the "no fit" when I resize the columns with the "columns width" slider.
I can't detect the fit button inside the

scheduler.widgetMap.fitButton?.menu.widgetMap

. Could you help me to find the right way to fix it?

{
                type: 'button',
                text: 'Layout',
                icon: 'b-fa-expand-arrows-alt',
                width: '9em',
                style: width <= 639 ? 'display: none' : '',
                menu: {
                    type: 'popup',
                    anchor: true,
                    layoutStyle: {
                        flexDirection: 'column',
                    },
                    items: [
                        {
                            type: 'checkbox',
                            ref: 'none',
                            text: 'No Fit',
                            checked: false,
                            onInput(item) {
                                const scheduler = schedulerRef.current?.instance
                                item.source.owner.widgetMap.none.checked = true
                                item.source.owner.widgetMap.fit.checked = false
                                scheduler.resourceColumns.fitWidth = false
                                dispatch(updateLocalConfig({ fitWidth: false }))
                            }
                        },
                        {
                            type: 'checkbox',
                            ref: 'fit',
                            id: 'fitButton',
                            text: 'Fill Width',
                            checked: 'up.resourceColumns.fitWidth',
                            onInput(item) {
                                const scheduler = schedulerRef.current?.instance
                                item.source.owner.widgetMap.none.checked = false
                                item.source.owner.widgetMap.fit.checked = true
                                scheduler.resourceColumns.fitWidth = true
                                dispatch(updateLocalConfig({ fitWidth: true }))
                            }
                        },
                        {
                            type: 'slider',
                            ref: 'columnWidth',
                            text: 'columns_width',
                            showValue: true,
                            min: 50,
                            max: 200,
                            value: 'up.resourceColumnWidth',
                            onInput({ value }) {
                                const scheduler = schedulerRef.current?.instance
                                const fitWidgetMap =
                                    scheduler.widgetMap.fitButton?.menu.widgetMap ||
                                    {},
                                    fitNoneButton = fitWidgetMap.none,
                                    // fitFillButton = fitWidgetMap.fill,
                                    fitFitButton = fitWidgetMap.fit
                                console.log(scheduler.widgetMap);

                            if (fitNoneButton) {
                                fitNoneButton.checked = true
                                // fitFillButton.checked = false
                                fitFitButton.checked = false
                            }
                            scheduler.resourceColumns.fitWidth = /*scheduler.resourceColumns.fillWidth =*/ null
                            scheduler.resourceColumns.columnWidth = value
                            dispatch(updateLocalConfig({ fitWidth: false, columnWidth: value }))
                        }
                    },
                    {
                        type: 'slider',
                        ref: 'tickHeight',
                        text: capitalize(t('agenda.rows_height')),
                        showValue: true,
                        min: 20,
                        style: 'margin-top: .5em',
                        value: 'up.tickSize',
                        onInput({ value }) {
                            const scheduler = schedulerRef.current?.instance
                            // To allow ticks to not fill height
                            scheduler.suppressFit = true
                            // Set desired size
                            scheduler.tickSize = value
                            dispatch(updateLocalConfig({ fitWidth: false, tickSize: value }))

                        }
                    }
                ]
            },
        },

[alex.l]

Maybe better to use https://bryntum.com/products/gantt/docs/api/Core/widget/RadioGroup ? then you'll have select/unselect built-in and use only one name in widgetMap, the radioGroup itself.

[info@xnew.it]

Hey,

Thank you so much for your suggestions. But as the checkbox, I can't access to the radio group buttons (or checkbox) from the slider "columnWidth" inside the onInput().

{
                            type: 'slider',
                            ref: 'columnWidth',
                            text: 'columns_width',
                            showValue: true,
                            min: 50,
                            max: 200,
                            value: 'up.resourceColumnWidth',
                            onInput({ value }) {
                                const scheduler = schedulerRef.current?.instance
                                const fitWidgetMap =
                                    scheduler.widgetMap.fitButton?.menu.widgetMap ||  // <----- Need to change this value
                                    {},
                                    fitNoneButton = fitWidgetMap.none,
                                    // fitFillButton = fitWidgetMap.fill,
                                    fitFitButton = fitWidgetMap.fit
                                console.log(scheduler.widgetMap);

                        if (fitNoneButton) {
                            fitNoneButton.checked = true
                            // fitFillButton.checked = false
                            fitFitButton.checked = false
                        }
                        scheduler.resourceColumns.fitWidth = /*scheduler.resourceColumns.fillWidth =*/ null
                        scheduler.resourceColumns.columnWidth = value
                        dispatch(updateLocalConfig({ fitWidth: false, columnWidth: value }))
                    }

I need to move the option from fit to none when I resize the columns width with the slider. But I can't find the the checkbox or the radio group.

[info@xnew.it]

Hey Bryntum team,

Ok I found a solution. I just gave a ref to the menu origin button to find the children inside the widgetMap.
Thank you so much for the help.

[marcio]

Hey,

Glad that you found a solution and thanks for sharing it here, it'll help others that have a similar issue in the future!