This is a migrated thread and some comments may be shown as answers.

Moving Window Outside of Component

2 Answers 86 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Howard
Top achievements
Rank 1
Veteran
Howard asked on 06 Jul 2020, 03:08 PM

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 Answers, 1 is accepted

Sort by
0
Howard
Top achievements
Rank 1
Veteran
answered on 06 Jul 2020, 04:02 PM

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.

0
Accepted
Stefan
Telerik team
answered on 07 Jul 2020, 04:52 AM

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.
Tags
General Discussions
Asked by
Howard
Top achievements
Rank 1
Veteran
Answers by
Howard
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Share this question
or