0

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

Mohamed Elshowel
  • 1
  • 1

2 Answers2

0

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.

Sevvandhi Nagulan
  • 1
  • Thank you for your reply, but I think you did not get my problem. My problem is not in positioning the component in the same document (DOM), but it is in rendering a component in another document (popup) because by default SyncFusion renders the buttons in the popup outer window _which is what I want_, but it renders the component of the `DatePicker` itself in the main window not in the popup outer window beside the button which has been clicked and so, the click event happens in a window, but its result happens in another window! – Mohamed Elshowel Oct 06 '20 at 12:18
0

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

Sevvandhi Nagulan
  • 11
  • 2