How to display popup infront of gantt chart full screen view

2 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 27 Apr Link to this post

    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!

  2. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 28 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top