Rank 1
I was asked to look at an existing application and I have exactly zero React experience... The main form has a KendoReact grid on it, and when clicking on a button on the form, a small modal window pops up (it's not a Dialog, it's Window).
The problem is that clicking the X to close the popup doesn't do anything at all. Maximize and minimize work, but not the X. It only goes away by refreshing the page.
This is the popup:
import { Window } from '@progress/kendo-react-dialogs';
...
public exportCSVFile() {
let window =
<Window style={{ position: "fixed", marginTop: "-100px", width: "380px", height: "355px", zIndex: "10003" }} title={"REPORT PARAMETERS"}
onClose={this.closeDialog} modal >
<div>..... </div>
</Window>
return (<div>{window}</div>)
This is supposed to close it:
closeDialog() {
this.setState({
visibleForm: false,
});
this.props.closeDialog()
}The line "this.props.closeDialog()" goes deeper to a few other functions, but ultimately it doesn't do anything.
As I said, I don't really know React, but from looking at the code it looks like there should be a relationship between the popup and the main form, and something there is not quite right.
I've seen the sample implementations of Window, but the form I work with creates the window differently than the samples.
Any ideas? I'm not even sure if this could work the way it's done... maybe it wasn't done right initially.
Hi, Nicolas,
Thank you for the code snippets.
I see that you are setting the variable `visibleForm` to false in the onClose event handler without using it in the Window rendering. You can use it to render the Window conditionally so that when the X button is clicked, `visibleForm` is set to false and the Window is not rendered:
return (<div>{visibleForm && window}</div>)If this variable has another use in your application, declare another variable and use it as shown above.
The same approach is used to display the component in our examples in the documentation. In the `toggleDialog` function of the following demo, the state variable `visible` is changed to the opposite boolean value and is used to conditionally render the Window component:
For more information about conditional rendering using logical operators in React, you can check the following article:
I hope this helps, but please let us know if you have any further questions.
Regards,
Wissam
Progress Telerik
Hi Wissam,
I appreciate your input. I am familiar with your example, I looked at it a lot. The thing is that our file is not set up as cleanly as your example.
I attached the .tsx file in .txt format to give you an idea. I created a new variable 'visiblePopup', but the code below doesn't work because visiblePopup is unknown in that context.
return (<div>{visiblePopup && window}</div>)Hello, Nicolas,
I checked your file and realized that you are using `visiblePopup` instead of `this.state.visiblePopup` in a class component. Basically, in React the components can be either class components or functional components and the state is handled differently in both cases.
You can check the following articles for more information on this matter:
Changing `visiblePopup` to `this.state.visiblePopup` (inside the `exportCSVFile` function) should make things work properly. For convenience, I have updated your file with the change and I am sending it as an attachment.
I hope this helps.
Regards,
Wissam
Progress Telerik
Wissam,
Thanks, I get the idea and your suggestion works, However, now once I close the popup, I can't reopen it anymore.
In your toggleDialog example, you have two actions that toggle visible to true/false.
In my file there is the Window onClose, which sets visible to false, but there is nothing setting it back to true.
You'll see in the attached file some lines commented out where I attempted to set visiblePopup to true, but it doesn't work. Not sure if it's the wrong place and/or the wrong syntax.
Hi, Nicolas,
Take your time with the testing and let me know if I can assist you after that. Meanwhile, I would like to give you a solution that will hopefully fix the faced issue.
In the file attached by you, the Window is rendered inside the `exportCSVFile()` function that is rendered conditionally when `this.props.visibleReportPopup` is true:
{this.props.visibleReportPopup && this.exportCSVFile()}This variable is passed as a prop and is handled in another function. Since you mentioned that the Window opens when you click a button in the form, then I believe that it is set to true in the onClick event of that button.
You can set visiblePopup to `this.props.visibleReportPopup` and use it instead of `visibleReportPopup` to conditionally render the function. The value of visiblePopup should be set inside componentDidUpdate so that it is always updated when the prop value changes.
Like this, the variable will be set to true when the form button is clicked, and false when the X button is clicked. Conditionally rendering the `window` inside `exportCSVFile` is not needed anymore since we are conditionally rendering the whole function:
return (<div>{window}</div>)I applied the changes to the file and I am sending it back as an attachment.
Regards,
Wissam
Progress Telerik