Rank 1
Hi,
i am rendering 20 components with .map inside App.js (using React) and these 20 components do have something like this:
render() { var item = this.props.item var brand =this.props.brand var adminUrl = clientConfig.brands[brand].admin var chargeData = JSON.parse(item.chargedata) var { description,source,amount,outcome } = chargeData var { last4, country,cvc_check,exp_month,exp_year} = source var { risk_level } = outcome return ( <div> { this.state.json1 && <Window title={"All Details"} onClose={()=>{this.setState({json1:false})}} initialHeight={800} initialWidth={800}> <ReactJson src={item} /> </Window> } { this.state.json2 && <Window title={"Charge Object"} onClose={()=>{this.setState({json2:false})}} initialHeight={800} initialWidth={800}> <ReactJson src={chargeData} /> </Window> }
I do have a button which tiggers the json1 to true. Imagine i have scrolled several pages down and at the component number 8, to be at 8, the browser has scrolled like 3 pages down. I press Show button and it shows the window but NOT at the 3rd page but it is way top, it is on the first page of the browser.
I need the windows position relative to the wrapper i am using. What do i do wrong?
3 Answers, 1 is accepted
Hello,
This can be achieved by setting the initialTop and initialLeft props of the Window to position it at the desired place:
https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging/#toc-positioning
For example, the coordinates of the elements can be retrieved and use to position each Window on top of the element.
Regards,
Stefan
Progress Telerik
Rank 1
Hello,
Indeed this will require additional code, but it is not a very complex task, as React gives a reference to the DOM element using a ref and there is a JavaScript method that returns the element coordinates.
I made a short example showcasing this:
https://stackblitz.com/edit/react-whxiyl?file=app/main.jsx
If you have any suggestions about what we can provide so it is easier, please let me know and we will consider a new feature.
Regards,
Stefan
Progress Telerik