[Solved] Window is rendered on top of the page

[osman taskin]

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?

[Stefan]

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

[osman taskin]

AFAIK it is not easy task to retrieve to coordinates from an element, especially by react which wraps things around. Any recommendations? Or does telerik consider to improve this litte bit to make it easier for us? Most of the apps are multipage and elements are prerendered on top. Not very useful scenario.

[Stefan]

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