Pass document while rendering a React component in outer window

Question

I am trying to handle React components in popup outer windows, I am using FlexLayout, ag-Grid React and SyncFusion React and I managed to handle the outer window with FlexLayout by using const currentDocument = this.selfRef.current.ownerDocument; -check Floating Tabs (Popouts) in FlexLayout- and pass this currentDocument to getDocument() callback in ag-Grid and now I wanted to do the same with SyncFusion, but I found no method/property in SyncFusion to pass the currentDocument to it.

So, is there anyway to pass the outer window document to the SyncFusion component which will be re-rendered after going in outer window and leave the origin document?

Attached a screenshot for the issue when not passing the currentDocument (new outer window) to SyncFusion components I have pressed the Date Picker button in the outer window (on the right), but the DatePicker component rendered in the original window (on the left)!

SyncFusion DatePicker Issue Screenshot

Answer 1

You can align the popup position relate to input element by setting X and Y position in the open event of DateTimePicker popup as mentioned in the below code example.

    this.onOpen = (args) => {
      args.popup.position = { X: "left", Y: "bottom" };
    };

The possible values for popup position are left, right, top and bottom. Try specifying the all possible combination of values to align the popup based on your viewport.

Also, you can set the offsetX and offsetY value in number (Provide the x and y value by imaging x and y axis) to align the DateTimePicker popup relate to the input element. Here, we have provided the offsetX and offsetY value based on the desktop mode. You can customize it based on the view port.

   this.onOpen = (args) => {
    args.popup.offsetX= 1000;
     args.popup.offsetY= 1000;
   };

Sample Link: https://stackblitz.com/edit/react-yhgq4y-w2avy2?file=index.js

Provide more details about your query, if the solution suggested above does not help you.

Answer 2

You can customize the DatePicker popup’s in the desired position using the appendTo method in the open event argument. Kindly refer the below code,

    render() {
        return (
          <div className="control-pane">
            <div className="control-section">
              <div className="datepicker-control-section">
                <DatePickerComponent open={this.onOpen.bind(this)} />
              </div>
            </div>
            <div id="target" />
          </div>
        );
      }
     onOpen(args) {
        args.appendTo = document.body.querySelector("#target");
      }

Please find the sample below,

Sample link: https://stackblitz.com/edit/react-eekdsn?file=index.js