Our pure JavaScript Scheduler component


Post by frederick45 »

This is my grid in my lwc :

        this.UnplannedGrid = new bryntum.scheduler.Grid({
            flex        : 8,
            ui          : 'toolbar',
            features: {
                rowReorder: true,
                search: true,
                cellMenu : {
                    items : {
                        removeRow : false,
                        cut : false,
                        copy : false,
                        paste : false,
                        search : false,
                        planif : {
                            text   : 'Plannifier',
                            icon   : 'b-fa b-fa-user-times',
                            weight : 200,
                            onItem : ({ record, column }) => {
                                const popup = new bryntum.scheduler.Popup({
                                    header      : 'A Popup containing Widgets',
                                    autoShow    : false,
                                    centered    : true,
                                    closable    : true,
                                    closeAction : 'destroy',
                                    width       : '20em',
                                    minHeight   : '18em',
                                    bbar        : [
                                        {
                                            text     : 'Cancel',
                                            minWidth : 100,
                                            onAction : 'up.close'
                                        },
                                        {
                                            text     : 'OK',
                                            minWidth : 100,
                                            cls      : 'b-raised b-blue',
                                            onAction : () => {
                                                //Toast.show('Hello ' + popup.widgetMap.nameField.value);
                                                popup.close();
                                            }
                                        }
                                    ],
                                    items : [
                                        // a text field
                                        {
                                            ref   : 'nameField',
                                            type  : 'text',
                                            label : 'Enter your name'
                                        }
                                    ]
                                });
                                popup.show();
                              
} }, } }, }, title : 'Visites non planifiées', appendTo : this.template.querySelector('.main'), collapsible : true, store : { fields : [ { name : 'start', type : 'date' } ], data : ListEventNotPlanned, }, columns:[ { type: 'rownumber' }, { text: 'Visite', field: 'name', type: 'template', template: (data) => `${data.record.data.name}`, editor : false, minWidth : 100, }, { text: 'Date', field: 'start', type: 'date', format: 'DD/MM/YYYY', editor : false, minWidth : 100, }, { text: 'Durée', field: 'duration', type: 'time', format: 'HH:mm', editor: false, minWidth : 70, }, ] });

popup.show doesn't work


Post by Maxim Gorkovsky »

See this config: https://bryntum.com/products/gantt/docs/api/Core/widget/Popup#config-rootElement
Given LWC is a web component, you would need to set rootElement to the same root element for the custom component (".main" in your case IIRC)


Post Reply