jQuery UI Widgets › Forums › React › Is there a way to call the JqxWindow modally?
Tagged: jqxwindow
This topic contains 3 replies, has 2 voices, and was last updated by svetoslav_borislavov 1 year, 4 months ago.
-
Author
-
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 BorislavovjQWidgets Team
https://www.jqwidgets.com/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 BorislavovjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.