pop up alignment issue

[Ansuman Panda]

Hello Synfusion Team,

We are using synfusion grid. And we have defined a custom pop up for that named "Custom View" in toolbar of the grid. But the pop is not getting properly aligned to the icon. Is there any control with which we can achieve the requirement?

We have used mat-menu for this pop-up.

[Rajapandiyan Settu]

Hi Ansuman, 

Thanks for contacting Syncfusion support. 

We have validated your requirement at our end. You need to customize the position of your popup before show it in the DOM. We have prepared a sample for your reference. You can get it from the below link. 

Sample: https://stackblitz.com/edit/angular-b8ojvs?file=app.component.ts 

When you click the toolbar button, the toolbarClick event will be triggered. In that event, we have customized the position of popup element based on the target element position before show it in DOM. 

toolbarClick: https://ej2.syncfusion.com/angular/documentation/api/grid#toolbarclick 

[app.component.ts] 

 

  clickHandler(args: ClickEventArgs): void { 

    if (args.item.id === 'Click') { 

      var target = document.getElementById('Click').closest('.e-toolbar-item'); 

      // get the target element position details 

      var elempos = target.getBoundingClientRect(); 

      // customize the position of popup based on the target element position 

      this.dialog.element.style.left = elempos.x + 'px'; 

      this.dialog.element.style.top = elempos.height + elempos.y + 'px'; 

      // show the dialog 

      this.dialog.show(); 

    } 

  } 

 

Still if you face the issue, kindly share the below details to replicate it at our end. 

1. Share the complete code files (app.component.html/app.component.ts).
2. If possible share the issue reproducible sample or make the issue in given sample which will be very helpful for us.

Regards, 

Rajapandiyan S 

[Ansuman Panda]

Thank you, Team. The solution worked 

However, I tried to replicate the same for the column chooser. But it's not opening at the same place of the toolbar.

    if (args.item.id === 'column-chooser') {

      var target = document.getElementById('column-chooser').closest('.e-toolbar-item');

      var elempos = target.getBoundingClientRect();

      var left = elempos.x;

      var top = elempos.height + elempos.y;

      this.grid.openColumnChooser(left, top);

    }

i tried with  this.grid.openColumnChooser(top, left);  but the position still not the same. Is there any other way to do this.  

[Rajapandiyan Settu]

Hi Ansuman, 

Thanks for your update. 

We have validated your requirement at our end. We suggest you to remove the elempos.y value from the top value to achieve your requirement. Find the below modified code example for your reference. 

[app.component.ts] 

 

  clickHandler(args: ClickEventArgs): void { 

    --- 

    if (args.item.id === 'column-chooser') { 

      var target = document.getElementById('column-chooser').closest('.e-toolbar-item'); 

      var elempos = target.getBoundingClientRect(); 

      var left = elempos.x; 

      var top = elempos.height; // get the top value 

      this.grid.openColumnChooser(left, top); 

    } 

  } 

 

Since the target of ColumnChooser popup is EJ2 Grid element. So, there is no need to use the elempos.y value in the top position. 

Sample: https://stackblitz.com/edit/angular-b8ojvs-adfqhm?file=app.component.ts 

Also, we would like to let you know that the Grid have built-in support to open the column chooser from the toolbar. Find the below documentation for your reference. 

Column Chooser: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-chooser 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Ansuman Panda]

Thank you Rajapandiyan and Synfusion Team for helping.

[Rajapandiyan Settu]

Hi Ansuman, 

We are glad that you have achieved your requirement with the provided solution. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S