How to make only the spreadsheet block go full screen with its built-in popup?

[Brad]

Hi,

I'm trying to incorporate a full-screen function into the spreadsheet toolbar with the following configuration:

$("#spreadsheet").kendoSpreadsheet({
    sheets: sheets,
    toolbar: {
        home: [
        {
            type: "button",
            text: "Full Screen",
            showText: "overflow",
            icon: "k-icon k-i-full-screen",
            click: function () {
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else {
                    $('#spreadsheet').get(0).requestFullscreen();
                }
            }
        }
        ]
    }
});

After clicking the full-screen button, the spreadsheet block goes full screen, but certain built-in popups don't show (e.g., validation list, warning popups, color picker, export popups...). I suspect this is because all the elements that aren't showing are outside my spreadsheet element. Is there a solution to this, or another way to make the spreadsheet block go full screen?

Thanks for your help!

[Patrick | Technical Support Engineer, Senior]

Hello Brad,

The Fullscreen mode will need to be handled when these popups appear using the FullScreen API.  For example, here is an example of the Kendo UI Spreadsheet which has a Full Screen button and a button to open a kendo alert predefined dialog. Typically, the kendo.alert would appear the behind the fullscreen.  In this case, consider first exiting full screen mode and then showing the specific popups/notifications:

Spreadsheet

      $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
          home: [
            {
              type: "button",
              text: "Full Screen",
              click: function () {
                if (document.fullscreenElement) {
                  document.exitFullscreen();
                } else {
                  $('#spreadsheet').get(0).requestFullscreen();
                }
              }
            },{
              type: "button",
              text: "show alert",
              click: function () {
                if (document.fullscreenElement) {
                  document.exitFullscreen();  //close fullscreen mode if open
                } 
                kendo.alert("This is a Kendo UI Alert message.");
              }
            }
          ]
        }
      });

Please take a look at this Progress Kendo UI Dojo which demonstrates the above.  Hope this information helps clear things.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

[Brad]

Hello Patrick,

Thanks for your response.
Could you provide further guidance on how to exit full-screen mode prior to the validation list being displayed?



Thanks.

Best Regards,
Brad

[Patrick | Technical Support Engineer, Senior]

Regarding the new question, I've reached out to our developers to help determine if it is possible, and the best practice.  I'll update here when I hear back.  Thank you for your patience and understanding!

[Patrick | Technical Support Engineer, Senior]

Thank you again for the patience!

I have heard from our developers and can confirm the behavior is not a bug.  In order to utilize fullscreen mode, the body will need to enter fullscreen mode and not the component. (full dojo)

That being said, when it does enter fullscreen mode, custom logic may need to be applied to expand the Kendo UI Spreadsheet to occupy the entire body before entering fullscreen mode, and likewise, may need to provide the prior width/height when exiting.