JQXWindow drops isModal after states/props changed

[vmlaskinBlocked]

I have applications with jqwidgets v.5.6.0 and React v.16.3.1 and currently migrating to the latest jqwidgets v.12.0.
Code below works in old environment without issues.
New environment: jqwidgets 12.0 and React 16.14.0.
There are two issues in new environment.
1. setting initial size of the window doesn’t allow to change it. If props or states in components changed then it will require re-render jqxWindow. Each rendering restores window size to initial value.
2. after re-rendering jqxWindow drops its modal mode

in code below click on Show Window button. Window will open in modal mode
then click on Change Width button. window is not in modal mode any more.
continue clicking on Change Width button. Window size restores to initial value on each re-rendering

The question is how to set initial window size, change window size and preserve modal mode with less code structural changes when migrating code.

Thanks

code below has component state. When it changes it requires re-rendering

import * as React from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';

class App extends React.PureComponent<{}, any> {
    private myWindow = React.createRef<JqxWindow>();
    constructor(props: {}) {
        super(props);
        this.showWindowButtonClick = this.showWindowButtonClick.bind(this);
        this.eventWindowClose = this.eventWindowClose.bind(this);
        this.eventWindowOpen = this.eventWindowOpen.bind(this);
        this.changeWidthButtonClick=this.changeWidthButtonClick.bind(this);

        this.state={
            winOpened: "window is closed"
        }
    }
    public render() {
        return (
            <div>
                <button onClick={this.showWindowButtonClick}  disabled={this.myWindow && this.myWindow.current ? this.myWindow.current!.isOpen() : false}>
                    Show Window
                </button>
                <div>{this.state.winOpened}</div>
                <JqxWindow ref={this.myWindow}
                    autoOpen={false}
                    onClose={this.eventWindowClose}
                    onOpen={this.eventWindowOpen}
                    width={280}
                    height={200}
                    resizable={false}
                    isModal={true}
                    modalOpacity={0.3}
                    position={{ x: 90, y: 140 }}
                    draggable={true}
                >
                    <div>
                        {/**/}
                        Modal Window
                    </div>
                    <div>
                        <div>
                            Please click "Change Width" button to increase width of the window or the close button to close the modal window.
                        </div>
                        <div style={{marginTop: 15 }}>
                            <div>
                                <button onClick={this.changeWidthButtonClick} >
                                    Change Width
                                </button>
                            </div>
                        </div>
                    </div>
                </JqxWindow>
            </div >
        );
    }
    private changeWidthButtonClick(): void {
        let wWidth=this.myWindow.current!.getOptions("width");
        wWidth += 10;
        this.myWindow.current!.setOptions({width: wWidth});
        this.setState({
            winOpened: <code>window width is ${wWidth}</code>
        })

    }

    // Event handling
    private showWindowButtonClick(): void {
        this.myWindow.current!.open();
    }

    private eventWindowClose(event: any): void {
        this.setState({
            winOpened: "window is closed"
        })
    }

    private eventWindowOpen(event: any): void {
        let wWidth=this.myWindow.current!.getOptions("width");
        this.setState({
            winOpened: <code>window width is ${wWidth}</code>
        })
    }
}

export default App;

[HristoParticipant]

Hello vmlaskin,

The setState method always re-render the application.
You could try to use another approach, I think, you could try something with the shouldComponentUpdate option.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[vmlaskinBlocked]

the sample just shows the issue with re-rendering. In real life application there are states and props that need to be updated and cause re-rendering.
I can’t prevent it in shouldComponentUpdate. React application is about updating states and props.

[HristoParticipant]

Hello vmlaskin,

Thank you for the clarifications.
I would like to suggest you to try this approach:

this.myWindow.current!.close();
this.setState({
	width: wWidth,
	winOpened: <code>window width is ${wWidth}</code>
});
this.myWindow.current!.open();

Where the width property is set in the state object and also it determines the width of the jqxWindow.
Meanwhile, I will discuss this case with my colleagues because it will handle better this case without animation but it should be cleared.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[vmlaskinBlocked]

it works but flashing screen is definitely not for production grade application.
need better solution

[HristoParticipant]

Hello vmlaskin,

I created a work item for this case.
Please, let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[vlad60Participant]

any updates on the issue?

Thanks,

[MartinParticipant]

Hello vlad60,

The issue is still valid. You can check its progress Here.

Best Regards,
Martin Yotov

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

[vlad60Participant]

the issue is reported almost year ago.
any suggestions or workarounds?
link for checking progress shows that nobody works on the issue.

Thanks,

[Author]

Posts