Combining Window Features With Dialog Overlay

[GokuJim]

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.

[Nikolay]

Hi James,

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

[GokuJim]

Thanks for the ideas, will check these out to see which one may meet my requirements.

Jim

SKF USA, Inc.

[GokuJim]

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 = 0
14.  mouseTopDifference = 0
15.  handlePress = (e) => {
16.    e.event.originalEvent.preventDefault()
17.    this.mouseTopDifference = e.event.clientY - this.state.top
18.    this.mouseLeftDifference = e.event.clientX - this.state.left
19.  }
20.  handleChange = (e) => {
21.    this.setState({
22.      confirm: e.target.value
23.    })
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.mouseLeftDifference
31.    })
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.          <Dialog
43.            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.top
53.            }}
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.);

[Nikolay]

Hi James,

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

[GokuJim]

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.

[GokuJim]

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: hidden

button.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.

[Stefan]

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

[Ajit]

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

[Stefan]

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

[Ajit]

This will be really Helpful!