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

Moving Window Outside of Component

2 Answers 374 Views

General Discussions

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

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

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Moving Window Outside of Component

2 Answers, 1 is accepted