Our blazing fast Grid component built with pure JavaScript


Post by agarcia »

Hi,

We are working in a react Project, we would like to use the Bryntum popup, and integrate our react components as a content of the Modal (Items).

I've been searching trough the Bryntum docs but I did not find anything.

What would be the right way of doing for this?

Thanks in advance
Regards


Post by tasnim »

Hi,

You could achieve it like this

const popup = new Popup({
                        header : 'Hello',
                        autoShow : false,
                        centered : true,
                        closable    : true,
                        width       : '30em',
                        height      : '30em',
                        html        : 'Hello'
                    })

Please check docs https://bryntum.com/products/gantt/docs/api/Core/widget/Popup
Hope this will help


Post by agarcia »

Hi Tasnim thank you very much for your answer,

Then, It would be possible this? :

const popup = new Popup({
                        header : 'Hello',
                        autoShow : false,
                        centered : true,
                        closable    : true,
                        width       : '30em',
                        height      : '30em',
                        html        :   <MyReactComponent />
                    })

What I want is to reuse my full react components within the Bryntum popup.

Thank you.


Post by marcio »

Hey agarcia,

Right now that's not supported, but I created a ticket to add that in some way https://github.com/bryntum/support/issues/6862

Best regards,
Márcio


Post by agarcia »

Hi Marcio,
Just for you to know, I found a workaround for that proposal, I did not test many components.

But with this code, I was able to integrate Some react componentes within a Bryntum popup. (using 'renderToString' function, and a Bryntum Panel)

  const tkFormContent = renderToString((
    <>
      <TkForm
        defaultFormValues={{}}
        className={style['propertiesContainer']}
        id="propertiesTenantInfo2"
        children={[
          <TkInputText name="Name" required={true} label="Name" defaultValue={''} />,
          <TkInputText name="Name" label="Name" defaultValue={''} />,
          <TkButton form="propertiesTenantInfo2" text="Save"/>
        ]}
      />
    </>
  ))
  
const pop = new Popup({ header: 'A simple text Popup', autoShow: true, centered: true, closeAction: 'destroy', closable: true, width: '60%', modal: true, items: [ { type: 'grid', height: '55vh', width: 1000, cls: '', selectionMode: { cell: false, checkbox: false, showCheckAll: false }, features: { cellEdit: false, filterBar: false, filter: false, group: { field: 'environment' } }, rowHeight: 30, columnLines: true, columns: [ { field: 'objType', text: 'OBJECT TYPE', flex: '1', outerHeight: 8 }, { field: 'number', text: 'NUMBER', outerWidth: 'auto', type: 'number', align: 'center', outerHeight: 8 }, { field: 'environment', text: 'ENVIRONMENT', flex: '6', outerHeight: 8 } ], store: { fields: ['objType', 'number', 'environment'], data } }, { type: 'panel', html: tkFormContent } ], ......................

Regards


Post by tasnim »

Glad to hear that you've found a workaround.

All The Best :)


Post Reply