After studying the API for a Window KendoReact component, is there a way to implement either:
1) The Draggable features on a Dialog component that is overlaid on top of a Kendo React Grid component.
2) The Dialog smoke underlayment for a Window component that is overlaid on a Kendo React Grid component.
In other words I would like a draggable Dialog, or a draggable Window that looks like a Dialog implementation.
Is there anyway either of the above are possible? And if so, do you have an available example of its implementation?
Thanks,
James
SKF USA, Inc.
10 Answers, 1 is accepted
The desired behavior can be achieved by using the KendoReact draggable component and the dialog. Here is an example showing how to add the draggable functionality to the dialog component: https://stackblitz.com/edit/react-jgff44?file=app/main.jsx.
It is also possible to add the dialog overlay to the window: https://stackblitz.com/edit/react-6j29y2?file=app/main.jsx.
I hope this helps.
Regards,
Nikolay
Progress Telerik
Rank 1
Thanks for the ideas, will check these out to see which one may meet my requirements.
Jim
SKF USA, Inc.
Rank 1
After implementing this using a Draggable component wrapping a div wrapped Dialog object, I believe I found a bug in the most recent versions of the Draggable/Dialog combination of components.
Try this modified version of your stackblitz.com code for main.js below, and you will find you cannot click the HTML input box to give it focus anymore. If you remove the wrapping <div> you will regain focus, but lose the draggability of the Dialog component.
01.import React from 'react';02.import ReactDOM from 'react-dom';03.import { Draggable } from '@progress/kendo-react-common';04. 05.import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';06. 07.class App extends React.Component {08. state = {09. left: 50,10. top: 50,11. confirm: ''12. }13. mouseLeftDifference = 014. mouseTopDifference = 015. handlePress = (e) => {16. e.event.originalEvent.preventDefault()17. this.mouseTopDifference = e.event.clientY - this.state.top18. this.mouseLeftDifference = e.event.clientX - this.state.left19. }20. handleChange = (e) => {21. this.setState({22. confirm: e.target.value23. })24. }25. 26. handleDrag = (e) => {27. e.event.originalEvent.preventDefault()28. this.setState({29. top: e.event.clientY - this.mouseTopDifference,30. left: e.event.clientX - this.mouseLeftDifference31. })32. }33. handleRelease = (e) => {34. console.log("release")35. }36. render() {37. return (38. <Draggable onPress={this.handlePress}39. onDrag={this.handleDrag}40. onRelease={this.handleRelease}>41. <div >42. <Dialog43. style={{44. width: 300,45. height: 300,46. backgroundColor: "#5392e4",47. justifyContent: "center",48. display: "flex",49. position: "absolute",50. alignItems: "center",51. left: this.state.left,52. top: this.state.top53. }}54. title={"Please confirm"}55. onClose={this.toggleDialog}>56. <p style={{ margin: "25px", textAlign: "center" }}>Are you sure you want to continue?</p>57. <label>Confirm by typing Yes:</label>58. <input type="text" size="10" value={ this.state.confirm }/>59. <DialogActionsBar>60. <button className="k-button" onClick={this.toggleDialog}>No</button>61. <button className="k-button" onClick={this.toggleDialog}>Yes</button>62. </DialogActionsBar>63. </Dialog>64. </div>65. </Draggable>66. );67. }68.}69. 70.ReactDOM.render(71. <App />,72. document.querySelector('my-app')73.);After researching the issue, I think wrapping the Dialog in a Draggable component is not a good idea.
Can you check the second approach from my previous reply which renders the dialog overlay to the Window component: https://stackblitz.com/edit/react-6j29y2?file=app/main.jsx?
The Draggable is attached to the Window title only and will not mess up with the content.
Regards,
Nikolay
Progress Telerik
Rank 1
Thanks, Nikolay!
Your solution worked perfectly!
I have a minor followup question.
How do I hide the minimize and maximize buttons on the window title? I also would like to hide the hover effects as well.
I was able to do the hiding with the following SASS:
> button.k-button-icon.k-button.k-bare
> span.k-icon.k-i-window-minimize
visibility: hidden !important
> button.k-button-icon.k-button.k-bare
> span.k-icon.k-i-window-maximize
visibility: hidden !important
However, I still have the hover creating a shadow in the place of these hidden buttons.
I tried the following style rules for hover:
1) pointer-effects: none
2) box-shadow: none
3) box-shadow: 0 0 0
Any suggestions? Is there a WindowProps way of hiding these buttons instead of using SASS/CSS? Let me know, thanks!
James
SKF USA, Inc.
Rank 1
Nikolay, I was able to hide the functionality of these buttons by using the following SASS/CSS:
button.k-button-icon.k-button.k-bare:first-of-type pointer-events: none visibility: hiddenbutton.k-button-icon.k-button.k-bare:nth-of-type(2) pointer-events: none visibility: hidden
Thanks again for the solution. Works perfectly!
James
SKF USA, Inc.
Hello, James,
We have logged this as a task as it was requested a couple of times and we agree that it will be a useful addition to the component:
https://github.com/telerik/kendo-react/issues/429
Regards,
Stefan
Progress Telerik
Rank 1
Hi, Your method aslo works great, but if you just need an ovelay along with the window component, then you can use the "modal" props for the window component.
So the overlay will automatically be visible instead of using the state.
more info here : https://www.telerik.com/kendo-react-ui/components/dialogs/api/WindowProps/#toc-modal
Hello, Ajit,
Thank you for sharing that prop.
The reason the prop was not suggested earlier is that it is a new prop that was not available at the time.
Based on this and some other requests we introduced it:
https://github.com/telerik/kendo-react/issues/295
Regards,
Stefan
Progress Telerik
Rank 1