Our pure JavaScript Scheduler component


Post by ashwin »

Hi,

I am using the subscription of Bryntum scheduler pro,
Is there a way to add Material UI Tabbed component in popup of schedulerpro. I have added using html property of pop up using 'ReactDOMServer.renderToStaticMarkup', but the issue is tab click events are not working.

Below is the sample

 const containerPopUp = ReactDOMServer.renderToStaticMarkup(<div><ToolTipPuck data={tooltip} /></div>);
 const popup = new Popup({
                header: ReactDOMServer.renderToStaticMarkup(<div><ToolTipPuckPopUpTitle data={tooltip} /></div>),
                autoShow: false,
                cls: 'common-popup-layout',
                // centered: true,
                closable: true,
                closeAction: 'destroy',
                width: '20em',
                html: containerPopUp,
        
});

in <ToolTipPuck> component i am using material Tab component.


Post by marcio »

Hey ashwin,

Could you please share a sample project with your full configuration for us to check? That kind of issue is a lot easier to solve with a sample project and a full configuration for us to check what's causing that issue.

Best regards,
Márcio


Post by ashwin »

There is no issue in the above code, I just want to know whether scheduler supports other party library ( Material UI ) inside Popup?
We can render the component inside popup, but no default events of Material UI are working


Post by saki »

...but no default events of Material UI are working

That is why we asked for a showcase. We need to sort-out where is the problem. We can fix any issues in our code but first we need to make sure where the root of the problem lies. Thus, prepare please a simplest possible runnable showcase so that we can spot the problem.

Also, we do support rendering a component as our Widget content. The simplest syntax is:

            items:[{
                type:'widget',
                html:<DemoWidget />
            }]

where DemoWidget is the React component, You can see this approach in https://bryntum.com/products/scheduler/examples/frameworks/react/javascript/react-tooltips/build/ in Scheduler bottom toolbar. We would recommend this approach, if possible.


Post by athan »

If using a <Component /> inside a Popup, how can I reach the Popup instance to manually close it inside the component?


Post by marcio »

Hey athan,

You can look for the component inside the Popup using the widgetMap. For example

gridRef.current.instance.widgetMap

https://bryntum.com/products/grid/docs/api/Core/widget/Container#property-widgetMap

Best regards,
Márcio


Post by athan »

Thanks for the reply.

However, the widgetMap only gets me to the tbar widget ("settings") that triggers the Popup via onAction, not the actual Popup instance.

<BryntumCalendar
       tbar={{
            items: {
              settings: {
                onAction: ({ source }) => {
                  const popup = new Popup({
                    items: [
                      {
                        type: 'widget',
                        html: <Component />
                      },
                    ],
                  });
                },
              },
            },
          }}
/>

I need to trigger popup.close() inside the `<Component />


Post by saki »

Have you tried to set ref on the popup? The docs say:

...map of descendant widgets keyed by their ref.

Also, the popup is created on-the-fly so tbar does not know about it. Try to create it as a tbar item and only call show/hide.


Post Reply