jQuery UI Widgets Forums React Is there a way to call the JqxWindow modally?

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  svetoslav_borislavov 6 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • nepalmer
    Participant

    Hi,
    I’m trying to use the JqxWindow in a yes/no control and I can’t seem to figure out how show the JqxWindow control modally so that I can wait for the result and then continue from that point. I’ve got JqxWindow control displaying correctly and my event handlers for the buttons work correctly as well.

    I have my JqxWindow control set to be modal using the isModal={true} property, and that works great. I then show the JqxWindow control using this command
    actionWindow.current!.open();

    But the code continues to execute after I execute this line. What I want is to hold until the user has responded and then continue and do the correct thing based on what button the user pressed.

    Is it possible to do this?

    Thanks

    Hi,

    The isModal property cannot block the code after opening it. You may paste the result code in the close event.

    Best regards,
    Svetoslav Borislavov

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


    nepalmer
    Participant

    Hi,

    Ok that makes sense. Here is the code I’m testing with.

    What I would like to be able to do is call the showWindowButton method and get what button the user clicked.

    let actionWindow = React.createRef<JqxWindow>();

    Function testME(): void {
    showWindowButton(‘This view contains data which has not yet been saved.\nDo you want to save the changes?\n’);
    }

    function showWindowButton(message: string): void {
    document.getElementById(‘lblMessage’)!.textContent = message;
    actionWindow.current!.open();

    console.info(‘App showWindowButtonClick isOpen ‘ + actionWindow.current!.isOpen());
    console.info(‘App showWindowButtonClick after’);
    }

    function actionWindowOnClick(e: Event): void {
    const target = e.target as HTMLElement;
    console.info(target.innerText);
    }

    function eventWindow(event: any): void {
    console.info({event});
    }

    {/* @ts-ignore */}
    <JqxWindow ref={actionWindow}
    onClose={eventWindow}
    theme={‘office’}
    width={320}
    height={160}
    resizable={false}
    cancelButton={‘.cancelButton’}
    okButton={‘.okButton, .noButton’}
    position={{ x: 10, y: 180 }}
    draggable={false}
    autoOpen={false}
    isModal={true}
    modalOpacity={0.3}
    showCloseButton={false}
    >
    <div>
    Proceed with change
    </div>
    <div>
    <div style={{ marginLeft: 5, marginRight: 5, border:1 || ‘solid’ || ‘black’ }} >
    <p id=’lblMessage’>

    </p>
    </div>
    <div style={{ float: “right”, marginTop: 15 }}>
    <div>
    {/* @ts-ignore */}
    <JqxButton className={‘okButton’} onClick={actionWindowOnClick} style={{ display: ‘inline-block’, marginRight: 10 }} width={60}>
    Yes
    </JqxButton>
    {/* @ts-ignore */}
    <JqxButton className={‘noButton’} onClick={actionWindowOnClick}style={{ display: ‘inline-block’, marginRight: 10 }} width={60}>
    No
    </JqxButton>
    {/* @ts-ignore */}
    <JqxButton className={‘cancelButton’} onClick={actionWindowOnClick} style={{ display: ‘inline-block’, marginRight: 40 }} width={60}>
    Cancel
    </JqxButton>
    </div>
    </div>
    </div>
    </JqxWindow>

    Hi,

    As I can see you are attaching an onClick on every button, in that handler, you can close the window and make the desired actions depending on what button is clicked.

    Best regards,
    Svetoslav Borislavov

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

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

You must be logged in to reply to this topic.