jQWidgets Forums

Hi,

For this task, my suggestion is to use Forwarding Refs. To forward a ref you need functional component, which is the preferable option nowadays.
Here is your case with three separated files:

Window component:
import { forwardRef } from ‘react’

import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;

const Window = forwardRef((props, ref) => (
<JqxWindow
ref={ref}
width=’40%’
height=’40%’
position={{ x: 60, y: 175 }}
showCollapseButton={true}
theme=’energyblue’
draggable={true}
resizable={true}
autoOpen={false}
>
<div >
<span>
Header
</span>
</div>
<div style={{ overflow: ‘hidden’ }}>
Content
</div>
</JqxWindow >
))

export default Window

Button component:
import { useState } from ‘react’;

import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;

const Button = ({ onClick }) => {

const [state, setState] = useState({
width: ‘5%’
});

return (
<JqxButton
width={state.width}
theme={‘energyblue’}
onClick={onClick}
rtl={true}
value={‘ایجاد’}
/>
)
}

export default Button

WindowButton Component (The component which binds Window and Button):
import React, { useRef } from ‘react’

import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’

import Window from ‘./Window/Window’;
import Button from ‘./Button/Button’;

const WindowButton = () => {

const jqxWindowRef = useRef(null);

function onButtonClick() {
jqxWindowRef.current.open()
}

return (
<>
<Window ref={jqxWindowRef}></Window>
<Button onClick={onButtonClick}></Button>
</>
)
}

export default WindowButton

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

Hi,

Of course, it is possible. Also, you can pass different props in order to style jqxWindow or jqxButton.
If your Window.js and Button.js will contain only jqxWindow and jqxButton there is no point of creating new compononent just to wrap jqx.
Here you are your desired functionality, to open different windows with different buttons:

CRUD.js:
import React, { useRef } from ‘react’

import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’

import Window from ‘./Window/Window’;
import Button from ‘./Button/Button’;

const CRUD = () => {

const createWindowRef = useRef(null);
const readWindowRef = useRef(null);
const updateWindowRef = useRef(null);
const deleteWindowRef = useRef(null);

function onCreateButtonClick() {
createWindowRef.current.open()
}

function onReadButtonClick() {
readWindowRef.current.open()
}
function onUpdateButtonClick() {
updateWindowRef.current.open()
}
function onDeleteButtonClick() {
deleteWindowRef.current.open()
}
return (
<>
<Window ref={createWindowRef} x={20} y={140}>
<div><span>Create Header</span></div>
<div style={{ overflow: ‘hidden’ }}>Create Content</div>
</Window>
<Window ref={readWindowRef} x={40} y={160}>
<div><span>Read Header</span></div>
<div style={{ overflow: ‘hidden’ }}>Read Content</div>
</Window>
<Window ref={updateWindowRef} x={60} y={180}>
<div><span>Update Header</span></div>
<div style={{ overflow: ‘hidden’ }}>Update Content</div>
</Window>
<Window ref={deleteWindowRef} x={80} y={200}>
<div><span>Delete Header</span></div>
<div style={{ overflow: ‘hidden’ }}>Delete Content</div>
</Window>

<Button onClick={onCreateButtonClick} value={‘Create’}></Button>
<Button onClick={onReadButtonClick} value={‘Read’}></Button>
<Button onClick={onUpdateButtonClick} value={‘Update’}></Button>
<Button onClick={onDeleteButtonClick} value={‘Delete’}></Button>
</>
)
}

export default CRUD

Window.js:
import { forwardRef } from ‘react’

import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;

const Window = forwardRef((props, ref) => (
<JqxWindow
ref={ref}
width=’40%’
height=’40%’
position={{ x: props.x, y: props.y }}
showCollapseButton={true}
theme=’energyblue’
draggable={true}
resizable={true}
autoOpen={false}
>
{
props.children
}
</JqxWindow >
))

export default Window

Button.js:
import { useState } from ‘react’;

import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;

const Button = ({ onClick, value, className, style }) => {

const [state, setState] = useState({
width: ‘5%’
});

return (
<JqxButton
className={className}
width={state.width}
style={style}
theme={‘energyblue’}
onClick={onClick}
rtl={true}
value={value}
/>
)
}

export default Button

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/