Moving Window Outside of Component

[Howard]

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

 

[Howard]

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.

[Stefan]

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