jQuery UI Widgets Forums React open jqxwindow after click on jqxbutton

This topic contains 7 replies, has 2 voices, and was last updated by  kashehi 5 days, 7 hours ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • open jqxwindow after click on jqxbutton #123735

    kashehi
    Participant

    hi, I have two file , in one of them I write class for jqxwindow and in second one is class code for jqxbutton ,I have third file than in I should click on jqxbutton and then jqxwindow open. but I don know the code in third class Would you please help me?

    first class code

    import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
    import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
    import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;

    class WindowPopup extends React.Component {

    constructor(props) {
    super(props);

    }
    componentDidMount() {

    }
    render() {
    return (
    <JqxWindow ref=’jqxWindow’
    width={‘40%’} height={‘40%’}
    position={{ x: 60, y: 175 }}
    showCollapseButton={true}
    theme={‘energyblue’}
    draggable={true}
    resizable={true}
    >
    <div >
    <span>

    Header
    </span>
    </div>
    <div style={{ overflow: ‘hidden’ }}>
    Content
    </div>
    </JqxWindow>
    )
    }
    }

    export default WindowPopup;

    second class code

    import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
    import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
    import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;
    import WindowPopup from ‘../components/windowpopups’;
    class Button extends React.PureComponent {

    //jqxWindow = useRef(WindowPopup);
    constructor(props) {
    super(props);

    this.state = {
    //imgPosition: ‘center’,
    //textImageRelation: ‘imageBeforeText’,
    //textPosition: ‘left’,
    value: “<span style={{ fontWeight: ‘bold’ }}>دکمه</span>”,
    width: ‘5%’
    // Other Widget Props
    }
    }

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

    }
    onClick(Event) {
    /* jqxWindow.current.open();*/
    }
    }

    export default Button;

    open jqxwindow after click on jqxbutton #123736

    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/

    open jqxwindow after click on jqxbutton #130938

    kashehi
    Participant

    Hi again,
    thank you for your response, it was ok for one window and one button and worked in my project, but I want one button component and one window component and in all of my project I call them with different style ,for example one button named it create and another named delete with click on each of button open jqxwindow related to them, but with just 2 component(button,jqxwindow).
    Is it possible?

    open jqxwindow after click on jqxbutton #130943

    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/

    open jqxwindow after click on jqxbutton #130948

    kashehi
    Participant

    Hi, thank you for response, I helped me alot, But this time I have one company.js component with four button that I called CRUD.js on it and it works.
    But I have User.js Component and also it has four button , I want Call CRUD.js again but I want where click on create button it opens different html from create button on Company.js
    How can I do this?

    open jqxwindow after click on jqxbutton #130957

    kashehi
    Participant

    Hi,
    Would you please answer my question?

    open jqxwindow after click on jqxbutton #130964

    Hi,

    As you can see the window and the button are bound via the createWindowRef.
    You can modify the click function of the button to open different window.
    You can use the button and the window not with Component but directly in you Company.js

    const createWindowRef = useRef(null);

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

    <Window ref={createWindowRef} x={20} y={140}>
    <div><span>Create Header</span></div>
    <div style={{ overflow: ‘hidden’ }}>Create Content</div>
    </Window>

    <Button onClick={onCreateButtonClick} value={‘Create’}></Button>

    Best regards,
    Svetoslav Borislavov

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

    open jqxwindow after click on jqxbutton #130983

    kashehi
    Participant

    thank you for response, It helps me.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.