Moving Window Outside of Component

3 posts, 1 answers
  1. Howard
    Howard avatar
    5 posts
    Member since:
    Jun 2020

    Posted 06 Jul 2020 Link to this post

    So I am hoping to use a button to open a window which will have a form for editing or adding data which is inside of the Grid Kendo UI component. Basically when they hit the edit button I would like a window to pop up pre-populated with some data from that line inside of the grid.

    Getting the data passed to the window is not a problem, the problem is that the window seems to only render inside of the grid component where I would actually like it to render inside of the browser window if possible. I am using a command cell to place the buttons inside of the grid, ultimately the window component is housed inside of this command cell. I am doing this because I dont believe it is possible to move data back up to parent components from a child component, i.e. if i change state on a child component I can not pass that state up to the parent component. Below is my code for the command cell:

     

    import React from 'react';
    import { GridCell } from '@progress/kendo-react-grid';
    import { Window } from '@progress/kendo-react-dialogs';
    import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
    import { Form, Field, FormElement } from '@progress/kendo-react-form';
    import { Error } from '@progress/kendo-react-labels';
    import { Input } from '@progress/kendo-react-inputs';
    import { Progressbar, ChunkProgressBar } from '@progress/kendo-react-progressbars'
    import {Fullscreen} from "@material-ui/icons";
     
     
     
    export function DataGridCommandCell({ edit, remove, add, update, discard, cancel, editField }) {
        return class extends GridCell {
            constructor(props) {
                super(props);
                this.state = {
                    windowVisible: false
                };
                this.toggleEditWindow = this.toggleEditWindow.bind(this)
            }
     
            toggleEditWindow(){
                this.setState(
                    {windowVisible: !this.state.windowVisible}
                )
                console.log(this.props.dataItem)
     
            }
            render() {
                const { dataItem } = this.props;
     
                const handleSubmit = (dataItem) => alert(dataItem.input.test);
     
     
                return (
     
                        <div>
                            <button className="k-button k-primary" onClick={this.toggleEditWindow}>Edit</button>
     
                            {this.state.windowVisible &&
                            <Window
                                title = {'Executive Actions'}
                                initialHeight={650}
                                initialWidth={1000}
                                onClose={this.toggleEditWindow}
                                initialLeft={1}
                                initialTop={1}
                                stage={'Fullscreen'}
     
     
                            >
     
                             <div>
                                 test
                             </div>
     
     
                            </Window>
                            }
                        </div>
     
     
     
                )
     
            }
        }
    };
     
    export default DataGridCommandCell

     

  2. Howard
    Howard avatar
    5 posts
    Member since:
    Jun 2020

    Posted 06 Jul 2020 in reply to Howard Link to this post

    Looks like a portal will be the solution to this. I didn't know about react portals until a few minutes ago, but this seems to be the best way to have the window be placed into a desired location on the dom. The React Docs talk about this here :

    https://reactjs.org/docs/portals.html

    If there is a Kendo specific solution to this I would love to know it however.

  3. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 06 Jul 2020 Link to this post

    Hello, Howard,

    Thank you for the details.

    Yes, using portals is the recommended approach in this case as it allows rendering elements inside a specific DOM element.

    As I can agree this is a useful feature, I logged an enhancement which will allow rendering the Window inside a specified DOM element out of the box:

    https://github.com/telerik/kendo-react/issues/659

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top