jQWidgets Forums
Forum Replies Created
-
Thanks for respond.
As I stated in my question, your demo samples work fine. I see that JQXButtons fired events from JqxWindow content.
Issue is started when I added regular buttons or textbox to the sample code.
Bellow is code with my changes where I added regular button (“My Button”) to JqxWindow content, added “Outside JqxWindow Button” outside JqxWindow content, and wired all buttons with onClick event. Also I commented JqxWindow properties cancelButton,okButton because I am not interested in open/close window events at this point.
Run this code and click on all buttons.
In my machine onClick event from regular button “My Button” is not fired. This button is in jqxWindow content.
All other buttons produce onClick events.import * as React from ‘react’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;
import JqxPanel from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel’;
import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;class App extends React.PureComponent<{}, any> {
private myWindow = React.createRef<JqxWindow>();
private events = React.createRef<JqxPanel>();
constructor(props: {}) {
super(props);
this.showWindowButtonClick = this.showWindowButtonClick.bind(this);
this.eventWindowClose = this.eventWindowClose.bind(this);
this.eventWindowMoved = this.eventWindowMoved.bind(this);
this.eventWindowOpen = this.eventWindowOpen.bind(this);
this.onButtonClick=this.onButtonClick.bind(this);
}
public render() {
return (
<div>
<JqxButton onClick={this.onButtonClick} width={80}>
Show
</JqxButton>
<button onClick={this.onButtonClick} >
Outside JqxWindow Button
</button>
<div style={{ marginTop: 10 }}>Events Log:</div>
<JqxPanel ref={this.events}
style={{ border: ‘none’ }}
width={450} height={250}>
</JqxPanel>
<JqxWindow ref={this.myWindow}
onClose={this.eventWindowClose}
onOpen={this.eventWindowOpen}
onMoved={this.eventWindowMoved}
width={270}
height={165}
maxHeight={180}
maxWidth={280}
minHeight={30}
minWidth={250}
// cancelButton={‘.cancel’}
// okButton={‘.ok’}
resizable={false}
// isModal={true}
modalOpacity={0.3}
position={{ x: 90, y: 140 }}
draggable={true}
>
<div>
{/*
*/}
Modal Window
</div>
<div>
<div>
Please click “OK”, “Cancel” or the close button to close the modal window.
The dialog result will be displayed in the events log.
</div>
<div style={{ float: “right”, marginTop: 15 }}>
<div>
<JqxButton onClick={this.onButtonClick} className={‘ok’} style={{ display: ‘inline-block’ }} width={80}>
OK
</JqxButton>
<JqxButton onClick={this.onButtonClick} className={‘cancel’} style={{ display: ‘inline-block’ }} width={80}>
Cancel
</JqxButton>
<button onClick={this.onButtonClick} >
My Button
</button>
</div>
</div>
</div>
</JqxWindow>
</div>
);
}
private capitaliseFirstLetter(word: string): string {
return word.charAt(0).toUpperCase() + word.slice(1);
};
private displayEvent(event: any): void {
let eventData = ‘Event: ‘ + this.capitaliseFirstLetter(event.type);
if (event.type === ‘moved’) {
eventData += ‘, X: ‘ + event.args.x + ‘, Y: ‘ + event.args.y;
}
if (event.type === ‘close’) {
eventData += ‘, Dialog result: ‘;
if (event.args.dialogResult.OK) {
eventData += ‘OK’;
} else if (event.args.dialogResult.Cancel) {
eventData += ‘Cancel’;
} else {
eventData += ‘None’;
}
}
this.events.current!.prepend(‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);
};
// Event handling
private showWindowButtonClick(): void {
this.myWindow.current!.open();
}
private eventWindowClose(event: any): void {
this.displayEvent(event);
}
private eventWindowMoved(event: any): void {
this.displayEvent(event);
}
private eventWindowOpen(event: any): void {
this.displayEvent(event);
}
private onButtonClick(event: any): void {
let eventData =Event: ${this.capitaliseFirstLetter(event.type)} ${event.target.textContent};
this.events.current!.prepend(‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);
}
}export default App;