Combining Window Features With Dialog Overlay

11 posts, 1 answers
  1. James
    James avatar
    26 posts
    Member since:
    Sep 2010

    Posted 01 Aug 2019 Link to this post

    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.

  2. Answer
    Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 05 Aug 2019 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. James
    James avatar
    26 posts
    Member since:
    Sep 2010

    Posted 06 Aug 2019 in reply to Nikolay Link to this post

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

    Jim

    SKF USA, Inc.

  4. James
    James avatar
    26 posts
    Member since:
    Sep 2010

    Posted 11 Sep 2019 Link to this post

    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.);
  5. Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 13 Sep 2019 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. James
    James avatar
    26 posts
    Member since:
    Sep 2010

    Posted 03 Jan 2020 in reply to Nikolay Link to this post

    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.

  7. James
    James avatar
    26 posts
    Member since:
    Sep 2010

    Posted 03 Jan 2020 in reply to James Link to this post

    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.

  8. Stefan
    Admin
    Stefan avatar
    3009 posts

    Posted 06 Jan 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Ajit
    Ajit avatar
    7 posts
    Member since:
    Jan 2020

    Posted 07 Jan 2020 in reply to Nikolay Link to this post

    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

  10. Stefan
    Admin
    Stefan avatar
    3009 posts

    Posted 07 Jan 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Ajit
    Ajit avatar
    7 posts
    Member since:
    Jan 2020

    Posted 07 Jan 2020 in reply to Stefan Link to this post

    This will be really Helpful! 
Back to Top