We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Zoom spreadsheet to full-screen

Thread ID:





128457 Jan 24,2017 11:28 AM UTC Feb 21,2017 09:19 AM UTC ASP.NET MVC 5
Tags: Spreadsheet
Richard de Zwart
Asked On January 24, 2017 11:28 AM UTC

In the RichEdit compoent, there is a way to make the editor occupy the entire screen. I was looking for something alike in the spreadhseet component, but could not find it.
Is there a way to zoom in?


Shanmugaraja K [Syncfusion]
Replied On January 25, 2017 07:36 AM UTC

Hi Richard, 
Thanks for using Syncfusion products, 
We can achieve your requirement by using addTabGroup and refreshSpreadsheet methods in loadComplete client side event. Please refer the below code example. 
    .ClientSideEvents(events => events.LoadComplete("loadComplete")) 
    function loadComplete(args) { 
        var xlObj = this, xlElement = xlObj.element, ribbonGrp; 
        ribbonGrp = { 
            alignType: ej.Ribbon.AlignType.Rows, text: "Screen", content: [{ 
                groups: [{  
                    id: "minmax", toggleButtonSettings: { 
                        contentType: ej.ContentType.TextOnly, 
                        defaultText: "Maximize", 
                        activeText: "Minimize", 
                        width: 120, 
                        height: 50, 
                        click: "onChange" 
                }], defaults: { type: ej.Ribbon.Type.ToggleButton } 
        xlObj.XLRibbon.addTabGroup(6, ribbonGrp, 5); 
        elemOffset = xlElement.position(); 
        elemPos = xlElement.css("position"); 
    function onChange(args) { 
        var xlObj = $('#Spreadsheet').data('ejSpreadsheet'), xlElement = xlObj.element, width = xlObj.model.scrollSettings.width, height = xlObj.model.scrollSettings.height; 
        if (args.isChecked) 
            xlElement.css({ "top": 0, "left": 0, "position": "fixed", "width": "100%", "height": "100%", "z-index": maxZindex() }); 
            xlElement.css({ "top": elemOffset.top, "left": elemOffset.left, "position": elemPos, "width": width, "height": height, "z-index": "" }); 
    function maxZindex() { 
        return Math.max.apply(null, 
                  $.map($('body *:not(.e-rowcell, .e-rowheader, .e-headercell)'), function (e, n) { 
                      return parseInt($(e).css('z-index')) + 1 || 1; 
We have prepared simple sample with these code examples and the same can be downloaded from the below link, 
Shanmugaraja K 

Richard de Zwart
Replied On January 25, 2017 08:10 AM UTC

Thanks for your answer, it looks promising.

I understand that there is a little Javascript needed to do the actual resizing, but could the definition of the button and adding it to the ribbon also be done in the Razor-page?

There is a RibbonSettings property on the spreadhseet object, but I do not understand how to use that to add a new button.


Shanmugaraja K [Syncfusion]
Replied On January 26, 2017 07:32 AM UTC

Hi Richard, 
Thanks for your update, 
We have only an option to add a new button in ribbon by using addTabGroup JavaScript method. Please refer the below documentation link for more details about addTabGroup method. 
Shanmugaraja K 

Richard de Zwart
Replied On February 20, 2017 11:17 AM UTC


Implemented it today. Works beautifully, thanks!


Shanmugaraja K [Syncfusion]
Replied On February 21, 2017 09:19 AM UTC

Hi Richard, 
Thanks for your update. We are happy to hear that your requirement has been resolved. 
Kindly get back to us if you need further assistance. 
Shanmugaraja K 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon