How to display popup infront of gantt chart full screen view

[developer]

Hi..

Im using kendo gantt chart. im giving option to view gantt chart data in full screen mode.im customizing the edit option for each task.when chart is in full screen mode if i trie to edit task details popup is opening behind the full screen,how to open popup infront of full screen 

here is my code for gantt chart full screen

View:

 

   <div id="activityganttchart" kendo-gantt k-options="createScheduleStep2.ganttOptions" class="row"
                 k-rebind="createScheduleStep2.ganttOptions"></div>
            <button class="grid-action-btn fullscreenBtn rightalign tooltipstyle action-gird-btn" uib-tooltip="Full screen" data-toggle="tooltip" tooltip-placement="top" ng-click="createScheduleStep2.toggleFullScreen()"><i class="settinggrid fa fa-arrows-alt"></i></button>

 

controller:

            function toggleFullScreen(control: string) {
                if (!document.fullscreenElement &&
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                    if (document.getElementById(control).requestFullscreen) {
                        document.getElementById(control).requestFullscreen();
                    } else if (document.getElementById(control).msRequestFullscreen) {
                        document.getElementById(control).msRequestFullscreen();
                    } else if (document.getElementById(control).mozRequestFullScreen) {
                        document.getElementById(control).mozRequestFullScreen();
                    } else if (document.getElementById(control).webkitRequestFullscreen) {
                        var element: any = Element;
                        document.getElementById(control).webkitRequestFullscreen(element.ALLOW_KEYBOARD_INPUT);
                    }
                    return true;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                    return false;
                }
            }

            function onToggleFullScreen() {
                var editor = $("#activitygantt");
                if (toggleFullScreen("activitygantt")) {
                    editor.children()[1].style.setProperty("height", $(document).height() + "px");
                    editor.children()[1].style.setProperty("width", $("body").width() + "px");
                } else {
                    editor.removeClass('fullscreenMode');
                    editor.children()[1].style.setProperty("height", "400px");
                    editor.children()[1].style.setProperty("width", "1573px");
                }
            };

            function exitHandler() {
                var editor = $("#activitygantt");
                if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                    editor.addClass('fullscreenMode');
                } else {
                    editor.removeClass('fullscreenMode');
                    editor.children()[1].style.setProperty("height", "400px");
                    editor.children()[1].style.setProperty("width", "1573px");
                    var ganntchart = $('#activityganttchart').data('kendoGantt');
                    ganntchart.wrapper.css("height", "400px");
                    ganntchart.resize();
                }
            }


            if (document.addEventListener) {
                document.addEventListener('webkitfullscreenchange', exitHandler, false);
                document.addEventListener('mozfullscreenchange', exitHandler, false);
                document.addEventListener('fullscreenchange', exitHandler, false);
                document.addEventListener('MSFullscreenChange', exitHandler, false);
            }

Appreciate your support!
Thanks!

[Bozhidar]

Hello,

You can use the edit event, which is triggered before the popup is shown, and modify the styles of the popup, which is passed through e.container:
http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#events-edit

Regards,
Bozhidar
Telerik