[INFO-REQ] How to display panel which collapses to the right end of the screen.

[rakshith.snps]

Hi,

Our app uses both gantt and scheduler just like in this example.
https://bryntum.com/products/gantt/examples/gantt-schedulerpro/

The flex direction of the container is column to place the widgets vertically.

We want to use a panel like this on
https://bryntum.com/products/schedulerpro/examples/highlight-event-calendars/

We want the panel to be attached to the right side of the screen and should open towards the center of the screen.

but since out flex direction is column its attached either towards the top of the screen or bottom of the screen based on how we place it.

to try to reproduce please use this code in gantt scheduler pro example

// Custom panel that allows easy live configuring
class ConfigPanel extends Panel {
    static type = 'configpanel';

static configurable = {
    scheduler : null,
    title     : 'Configuration',
    cls       : 'config-panel',
    items     : {
        // Toggle features on/off (or rather disable/enable)
        features : {
            type     : 'container',
            defaults : {
                type      : 'slidetoggle',
                cls       : 'b-blue',
                listeners : {
                    change({ source }) {
                        const
                            { value }   = source,
                            scheduler   = this.up('configpanel').scheduler;

                        switch (source.ref) {
                            case 'enableDragDrop':
                                scheduler.features.eventDrag.disabled = !value;
                                break;
                            case 'constrainToResource':
                                scheduler.features.eventDrag.constrainDragToResource = value;
                                break;
                            case 'highlight':
                                scheduler.features.calendarHighlight.disabled = !value;
                                break;
                            case 'snap':
                                scheduler.snap = value;
                                break;
                            default:
                                break;
                        }
                    }
                }
            },
            items : {
                enableDragDrop      : { text : 'Enable task drag drop', checked : true },
                highlight           : { text : 'Enable highlighting', checked : true },
                constrainToResource : { text : 'Constrain drag to row', checked : false },
                snap                : { text : 'Snap to grid', checked : true }
            }
        }
    }
};

get highlightOnHover() {
    return this.widgetMap.highlightOnHover.checked;
}
}

ConfigPanel.initClass();

const configPanel = new ConfigPanel({
   appendTo: 'container',
   collapsible: { direction : 'left' },
});

We want the panel to be like attached to right side.
currently I don't know which setting to use for this to happen.
please let me know if there is a way.

[tasnim]

Hi,

You could use a Container to achieve it

chrome_LSehP3Q8cO.png (180.2 KiB) Viewed 1082 times

Here is the code I used to achieve it

class ConfigPanel extends Panel {
    static type = 'configpanel';

static configurable = {
    scheduler : null,
    title     : 'Configuration',
    cls       : 'config-panel',
    items     : {
        // Toggle features on/off (or rather disable/enable)
        features : {
            type     : 'container',
            defaults : {
                type      : 'slidetoggle',
                cls       : 'b-blue',
                listeners : {
                    change({ source }) {
                        const
                            { value }   = source,
                            scheduler   = this.up('configpanel').scheduler;

                        switch (source.ref) {
                            case 'enableDragDrop':
                                scheduler.features.eventDrag.disabled = !value;
                                break;
                            case 'constrainToResource':
                                scheduler.features.eventDrag.constrainDragToResource = value;
                                break;
                            case 'highlight':
                                scheduler.features.calendarHighlight.disabled = !value;
                                break;
                            case 'snap':
                                scheduler.snap = value;
                                break;
                            default:
                                break;
                        }
                    }
                }
            },
            items : {
                enableDragDrop      : { text : 'Enable task drag drop', checked : true },
                highlight           : { text : 'Enable highlighting', checked : true },
                constrainToResource : { text : 'Constrain drag to row', checked : false },
                snap                : { text : 'Snap to grid', checked : true }
            }
        }
    }
};

get highlightOnHover() {
    return this.widgetMap.highlightOnHover.checked;
}
}

ConfigPanel.initClass();

// Project that will be shared by Gantt & SchedulerPro
const project = window.project = new ProjectModel({
    startDate : '2019-01-16',
    endDate   : '2019-02-13',

// General calendar is used by default
calendar : 'general',

transport : {
    load : {
        url : '../_datasets/launch-saas.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 ganttScheduler = new Container({
    appendTo : 'container',
    layout   : 'box',
    items : {
        container : {
            type : 'container',
            layout : 'box',
            layoutStyle : {
                flexDirection : 'column'
            },
            items : {
                gantt : {
                    type : 'gantt',
                    project,

                tbar : [
                    {
                        type : 'widget',
                        html : 'Zoom:'
                    },
                    {
                        ref      : 'zoomInButton',
                        icon     : 'b-icon-search-plus',
                        tooltip  : 'Zoom in',
                        onAction : ({ source }) => source.up('gantt').zoomIn()
                    },
                    {
                        ref      : 'zoomOutButton',
                        icon     : 'b-icon-search-minus',
                        tooltip  : 'Zoom out',
                        onAction : ({ source }) => source.up('gantt').zoomOut()
                    }
                ],

                resourceImageFolderPath : '../_shared/images/users/',
                appendTo                : 'container',
                flex                    : 1,
                features                : {
                    labels : {
                        left : {
                            field  : 'name',
                            editor : {
                                type : 'textfield'
                            }
                        }
                    }
                },

                viewPreset  : 'weekAndDayLetter',
                columnLines : true,

                columns : [
                    { type : 'sequence', minWidth : 50, width : 50, text : '', align : 'right', resizable : false },
                    { type : 'name', width : 280 },
                    { type : 'percent', text : '% Completed', field : 'percentDone', showValue : false, width : 160 },
                    { type : 'resourceassignment', text : 'Assigned Resources', showAvatars : true, width : 160 }
                ],

                startDate : '2019-01-11',

                listeners : {
                    beforeCellEditStart : ({ editorContext }) => editorContext.column.field !== 'percentDone' || editorContext.record.isLeaf
                }
            },
            splitter : { type : 'splitter' },
            scheduler : {
                type : 'schedulerpro',
                project,
                minHeight           : '20em',
                flex                : 1,
                partner             : 'up.widgetMap.gantt',
                rowHeight           : 45,
                eventColor          : 'gantt-green',
                useInitialAnimation : false,

                resourceImagePath : '../_shared/images/users/',

                features : {
                    dependencies : true,
                    percentBar   : true
                },

                columns : [
                    {
                        type           : 'resourceInfo',
                        field          : 'name',
                        text           : 'Resource',
                        showEventCount : false,
                        width          : 330
                    },
                    {
                        text     : 'Assigned tasks',
                        field    : 'events.length',
                        width    : 160,
                        editor   : false,
                        align    : 'right',
                        renderer : ({ value }) => `${value} task${value !== 1 ? 's' : ''}`
                    },
                    {
                        text     : 'Assigned work days',
                        width    : 160,
                        editor   : false,
                        align    : 'right',
                        renderer : ({ record }) => record.events.map(task => task.duration).reduce((total, current) => {
                            return total + current;
                        }, 0) + ' days'
                    }
                ]            
            }
        }
    },
    splitter : { type : 'splitter' },
    panel : {
        type        : 'configpanel',
        width       : 350,
        minWidth    : 250,
        collapsible : true,
        scheduler   : 'up.widgetMap.scheduler'
    }
}
});

DOCS https://bryntum.com/products/scheduler/docs/api/Core/widget/Container

Hope this helps.

Best of luck ,
Tasnim

[Animal]

Why have you nested a Container (features) inside the panel?

Why not just put content directly into the Panel?

[rakshith.snps]

Hi,

Thank you for providing the outline code for this feature, I was able to develop it on our side. But I noticed a slight problem in the closing and opening of the panel when its resized.

Could you please confirm ?

panelBug.gif (929.3 KiB) Viewed 667 times

[tasnim]

HI,

Sure, you'd need to have flex : 4 inside of the container

    items : {
        container : {
            type : 'container',
            layout : 'box',
            flex   : 4,

And remove the widths of the config panel and add flex

    panel : {
        type        : 'configpanel',
        flex        : '0 0 300px',
        collapsible : true,
        scheduler   : 'up.widgetMap.scheduler'
    }

This should resolve your issue.

Best regards,
Tasnim

[rakshith.snps]

Hi Tasnim, Thank you.
By the way I was wondering how did you change the color of the panel header ?
I'd also like to know how to change the width / height of the panel header.

Did you use

.b-panel-header

css to change the properties.

[tasnim]

Hi,

I haven't changed the color of the panel header. The reason for your panel header color is different from my panel header color is I'm using a different theme called Stockholm. Which you can switch like this!

msedge_Qfy2eHDJyp.gif (2.42 MiB) Viewed 610 times

And yes, you can add height to that class .b-panel-header

Best regards,
Tasnim