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

Window is rendered on top of the page

3 Answers 93 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
osman taskin
Top achievements
Rank 1
osman taskin asked on 05 Nov 2019, 01:46 AM

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

Sort by
0
Stefan
Telerik team
answered on 06 Nov 2019, 07:52 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
osman taskin
Top achievements
Rank 1
answered on 06 Nov 2019, 03:13 PM
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.
0
Accepted
Stefan
Telerik team
answered on 07 Nov 2019, 08:52 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
osman taskin
Top achievements
Rank 1
Answers by
Stefan
Telerik team
osman taskin
Top achievements
Rank 1
Share this question
or