Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

Full screen edit mode with multiple Editors on page

3 Answers 281 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Icon
Top achievements
Rank 1
Icon asked on 12 Jun 2020, 02:58 PM

Hi,

I'm experiencing some issues when implementing the full screen edit mode for editors when more than one editor appears on the page.

I have followed the example on this page: https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/appearance/show-editor-in-full-screen

and it works well when there is only one editor.

When there are multiple editors, the full screen edit mode always displays the content of the last editor on the page.

Here is an example of the behaviour using the code from the link above and simply creating another editor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
 
 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
   
  <textarea class="editor" id="editor1"></textarea>
 
  <textarea class="editor" id="editor2"></textarea>
 
  <style>
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
      .selector:not(*:root), .k-fullscreen .k-editor .k-editable-area {
        height: auto;
      }
 
      .selector:not(*:root), .k-fullscreen .k-editor .k-editor-toolbar-wrap {
        height: 35px;
      }
    }
    .k-fullscreen .k-editor {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100% !important;
    }
  </style>
 
  <script>
      var classHolder = $(document.documentElement);
      var fullscreenChange = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
      $(document).bind(fullscreenChange, $.proxy(classHolder.toggleClass, classHolder, "k-fullscreen"));
 
      function toggleFullScreen() {
        var docEl = document.documentElement;
 
        var fullscreenElement =
            document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement;
 
        var requestFullScreen = docEl.requestFullscreen ||
            docEl.msRequestFullscreen ||
            docEl.mozRequestFullScreen ||
            docEl.webkitRequestFullscreen;
 
        var exitFullScreen = document.exitFullscreen ||
            document.msExitFullscreen ||
            document.mozCancelFullScreen ||
            document.webkitExitFullscreen;
 
        if (!requestFullScreen) {
          return;
        }
 
        if (!fullscreenElement) {
          requestFullScreen.call(docEl, Element.ALLOW_KEYBOARD_INPUT);
        } else {
          exitFullScreen.call(document);
        }
      }
 
      $(".editor").kendoEditor({
        tools: [
          {
            name: "fullscreen",
            template:
              '<a class="k-button" onclick="toggleFullScreen()">' +
                '<span class="k-icon k-i-maximize k-tool-icon" /> Toggle fullscreen' +
              '</a>'
          }
        ]
      });
  </script>
</body>
</html>

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 16 Jun 2020, 02:48 PM

Hi Icon,

I inspected the provided snippet. The styles applied in order to display the Editor on full-screen are using the "k-fullscreen" and "k-editor" classes. Those styles match both Editors. Thus, both of the Editors are actually displayed on fullscreen. The second Editor is displayed over the first Editor. Here is a screencast where after hiding the second Editor, the first one is displayed also on fullscreen.

To avoid this behavior I would suggest you try to use different handlers for each Editor. You could also use different selectors for each Editor in order to apply the logic for rendering on full screen on two different elements using Full-screen API.

I hope the provided information will help.

Regards,
Neli
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Icon
Top achievements
Rank 1
answered on 13 Aug 2020, 10:10 AM

Hi Neli,

Thanks for your reply to my question. I have tried a few different methods, however I am still unable to get the desired result.

Is it possible for you to provide some sample code which I can use in the scenerio above?

Regards

0
Neli
Telerik team
answered on 17 Aug 2020, 09:02 AM

Hello,

I would suggest you try to hide the second Editor when the 'Toggle fullscreen' button is clicked in the first Editor. For example, you could send a parameter to mark which Editor is about to be rendered on full-screen mode. 

      $("#editor").kendoEditor({
        tools: [
          {
            name: "fullscreen",
            template:
            '<a class="k-button" onclick="toggleFullScreen(1)">' +
            '<span class="k-icon k-i-maximize k-tool-icon" /> Toggle fullscreen' +
            '</a>'
          }
        ]
      });

In case, it is the first Editor, at the end of the toggleFullScreen(editor) method, you could hide the second Editor:

if(editor == 1){          
	$(".k-editor").eq(1).hide() 
}

When the Editor is about to exit the full-screen mode, you could show the Editor again.

I hope the provided suggestion will be helpful for resolving the issue.

Regards,
Neli
Progress Telerik

Tags
Editor
Asked by
Icon
Top achievements
Rank 1
Answers by
Neli
Telerik team
Icon
Top achievements
Rank 1
Share this question
or