We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.
|
class Dialog extends Component {
constructor() {
super(...arguments);
}
componentDidMount() {
setTimeout(() => {
document.getElementById("dlgbtn").onclick = () => {
console.log("Dialog button clicked");
};
});
}
render() {
return (
<div className="control-pane">
<div className="control-section" id="rteTools">
<div className="rte-control-section" />
<DialogComponent
visible={true}
showCloseIcon={true}
width="70%"
header="Dialog Header"
height="200px"
allowDragging={true}
>
<div>
<p>Dialog Button</p>
<button id="dlgbtn">Button 1</button>
</div>
</DialogComponent>
</div>
</div>
);
}
} |
Hi Laurin,Good day to you,We have validated your reported query. We have tried to reproduce the reported issue using the shared code blocks, unfortunately we couldn’t find any issues from our end. We have also shared the ensured sample from our endIf possible, can you replicate the issue in the above sample and revert back to us ?. So that we can validate and provide solution at earliest.Regards,Indrajith
|
export class Default extends React.PureComponent {
. . .
content() {
return (
<div>
<form>
<ButtonComponent
id="btn"
content="Button"
type="button"
onClick={this.clickEventHandler}
/>
<ButtonComponent
id="btn"
type="button"
content="Submit"
onClick={this.onSubmit}
/>
</form>
</div>
);
}
. . .
clickEventHandler() {
console.log('click called');
}
onSubmit() {
console.log('Submit clicked');
}
render() {
return (
<div className="control-pane">
<button
className="e-control e-btn"
id="targetButton1"
role="button"
onClick={(this.handleClick = this.handleClick.bind(this))}
>
Open
</button>
<DialogComponent
ref={dialog => (this.dialogInstance = dialog)}
visible={this.state.hideDialog}
close={this.dialogClose}
showCloseIcon={true}
isModal={true}
width="70%"
header="Dialog with Button"
height="200px"
content={this.content.bind(this)}
buttons={this.buttons(this.isSubmitting, this.submitForm)}
/>
</div>
);
}
} |
|
export class Default extends React.PureComponent {
. . .
content() {
return (
<div>
<form>
<ButtonComponent
id="btn"
content="Button"
type="button"
onClick={this.clickEventHandler}
/>
<ButtonComponent
id="btn"
type="button"
content="Submit"
onClick={this.onSubmit}
/>
</form>
</div>
);
}
. . .
clickEventHandler() {
console.log('click called');
}
onSubmit() {
console.log('Submit clicked');
}
render() {
return (
<div className="control-pane">
<button
className="e-control e-btn"
id="targetButton1"
role="button"
onClick={(this.handleClick = this.handleClick.bind(this))}
>
Open
</button>
<DialogComponent
ref={dialog => (this.dialogInstance = dialog)}
visible={this.state.hideDialog}
close={this.dialogClose}
showCloseIcon={true}
isModal={true}
width="70%"
header="Dialog with Button"
height="200px"
content={this.content.bind(this)}
buttons={this.buttons(this.isSubmitting, this.submitForm)}
/>
</div>
);
}
} |
Hi Satheesh,Greetings from Syncfusion support.We have validated your queries,Query 1: “The same example does not work when I update the package to the latest version 19.1.”We have analyzed the shared sample and this issue occurs because the react is updated to version “17”, where the button click doesn’t work. This can be resolved by rendering the content using the content property of the dialog. We have modified the shared sample for your reference,Code Snippet:
