How to show context menu and gantt tooltip in fullscreen

[yxrgds]

Hi, We have a page, there are gantt component and other components. We just want to fullscreen the gantt component, but the context menu and gantt tooltip can not show under fullscreen mode. Is there a way to fix it? Thanks.

[mohankumar91]

Hi Yxrgds

We checked with our Gantt and we were able to view the context menu and tooltip in Gantt full screen mode. We have also attached a sample demonstrating it. Please ensure that you have injected the modules for context menu and tooltip properly.

For more information on Gantt Tooltip and Context Menu, please refer our Online Documentation and Samples.

Tooltip: Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/tooltip/ Sample: https://ej2.syncfusion.com/angular/demos/#/material/gantt/tooltip-template

Context Menu:
Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/context-menu/ Sample: https://ej2.syncfusion.com/angular/demos/#/material/gantt/context-menu

Please let us know, if you need any further assisatcen.

Regards, Mohankumar R

[yxrgds]

Hi Yxrgds

We checked with our Gantt and we were able to view the context menu and tooltip in Gantt full screen mode. We have also attached a sample demonstrating it. Please ensure that you have injected the modules for context menu and tooltip properly.

For more information on Gantt Tooltip and Context Menu, please refer our Online Documentation and Samples.

Tooltip: Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/tooltip/ Sample: https://ej2.syncfusion.com/angular/demos/#/material/gantt/tooltip-template

Context Menu: Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/context-menu/ Sample: https://ej2.syncfusion.com/angular/demos/#/material/gantt/context-menu

Please let us know, if you need any further assisatcen.

Regards, Mohankumar R

Hi Mohankumar R，

It's ok if I fullscreen the entire page. But I just fullscreen the gantt component, it won't work. I tried executing $('#content-tab').requestFullscreen() to just fullscreen the gantt component in the chrome console in the context menu sample(https://ej2.syncfusion.com/angular/demos/#/material/gantt/context-menu), it didn't work.

Thanks for your reply.

Regards, Yxrgds

[gopinathmuniraj]

Hi Yxrgds,

We have checked with our dependent components Tooltip and Context menu. We would like to let you know that, ContextMenu and Tooltip pop-up will be initially created and appended to the body element When you click the target element, it displays pop up.

Since, you are opening only a targeted element using requestFullScreen method, only that target and its inner elements will be displayed in full-screen mode. Since we append the ContextMenu pop-up and Tooltip’s popup in the body element it will not be displayed in the full screen mode unless the body is your target element.

Thanks, Gopinath M

[yxrgds]

Hi Yxrgds,

We have checked with our dependent components Tooltip and Context menu. We would like to let you know that, ContextMenu and Tooltip pop-up will be initially created and appended to the body element When you click the target element, it displays pop up.

Since, you are opening only a targeted element using requestFullScreen method, only that target and its inner elements will be displayed in full-screen mode. Since we append the ContextMenu pop-up and Tooltip’s popup in the body element it will not be displayed in the full screen mode unless the body is your target element.

Thanks, Gopinath M

Hi gopinathmuniraj ,

Thanks for your reply.

I understand the reason why the tooptip and context menu cann't display when the fullscreen target is not body element. But I found the components of ant design of angular(https://ng.ant.design/docs/introduce/en) solvoled this problem. They use overlay container(https://material.angular.io/cdk/overlay/overview) to deal with tooltip、select and dropdown menu. And they can display normally event the fullscreen target is not body element with this method: https://material.angular.io/cdk/overlay/overview. Maybe gantt content menu and tooltip can use the same way to solve the problem.

Thanks, Yxrgds.

[gopinathmuniraj]

Hi Yxrgds,

We have analyzed your query.

We have included the ant design and overlayContainer concepts in the Gantt control. And we still couldn’t include the context menu and tooltip rendering on opening the targeted element using requestFullScreen method.

And it will be displayed in the full screen mode only if the body is our target element.

We have included the sample, that we have tested Gantt with overlayContainer and ant design concepts. Please modify the below sample that what you are approaching regarding the displaying of context menu and tooltip in the Gantt control on opening the targeted element using requestFullscreen method. Please find the sample link below,

Sample: https://www.syncfusion.com/downloads/support/directtrac/291108/ze/ant-gantt-test1738397566

Please let us know if you need any further assistance on this.

Thanks, Gopinath M

[yxrgds]

Hi Yxrgds,

We have analyzed your query.

We have included the ant design and overlayContainer concepts in the Gantt control. And we still couldn’t include the context menu and tooltip rendering on opening the targeted element using requestFullScreen method.

And it will be displayed in the full screen mode only if the body is our target element.

We have included the sample, that we have tested Gantt with overlayContainer and ant design concepts. Please modify the below sample that what you are approaching regarding the displaying of context menu and tooltip in the Gantt control on opening the targeted element using requestFullscreen method. Please find the sample link below,

Sample: https://www.syncfusion.com/downloads/support/directtrac/291108/ze/ant-gantt-test1738397566

Please let us know if you need any further assistance on this.

Thanks, Gopinath M

Hi gopinathmuniraj,

I cann't access the sample you provide.

The websit give the following erorr:

Access Denied
You don’t have permission to access this file. The reason may be:
The incident associated with this file is not tied to the account you used to log in. To Logout use this link.
Your enterprise portal admin has not allowed you to access other portal users’ incidents. Ask admin to change the support visibility in their Syncfusion profile.
If you feel this information is wrong and you need to download this file, please contact us.

Thanks, Yxrgds

[poojapriya-krishnamoorthy]

Hi Yxrgds, We are sorry for the inconvenience caused. Please find the sample from below link. Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ant-gantt-test1738397566-1642116869

Regards, Pooja K.

[yxrgds]

Hi Yxrgds, We are sorry for the inconvenience caused. Please find the sample from below link. Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ant-gantt-test1738397566-1642116869

Regards, Pooja K.

Hi poojapriya-krishnamoorthy, Thanks for your reply. There is an example: https://stackblitz.com/edit/ng-zorro-antd-ivy-6kzv8r?file=src%2Fapp%2Fapp.component.html/ Run this app. Copy the url, open in a new page. Click the fullcreen button. You can see the select and dropdown still works under full screen. The key code is: and they used overlay container

[premkumarsudalaimuthu]

Hi Yxrgds,

We have checked your requirement from our side. In case of full screen, we need to append the context menu into the Gantt Component to achieve your requirement. We have prepared a sample and shared code snippets for your reference.

Code snippets:

FullScreen(): void {
    if (screenfull.isFullscreen) {
      screenfull.exit();
    } else {
      var gantt = document.querySelectorAll('.e-gantt')[0];
      screenfull.request(gantt as Element);
      gantt.appendChild(document.querySelectorAll('.e-contextmenu-wrapper')[0]);
    }
  }

Sample Link: https://stackblitz.com/edit/angular-g75nt2-6jpfjt?file=app.component.ts

Regards, Premkumar S

[syncsiva]

This issue has been resolved and has not had any activity for 2 weeks. Closing for housekeeping purposes. Please feel free to reopen if you have any further queries.