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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Zoom spreadsheet to full-screen

Zoom spreadsheet to full-screen

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?

Richard

7 Replies
SK Shanmugaraja K Syncfusion Team 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. 
 
[CSHTML] 
 
 
    @(Html.EJ().Spreadsheet<object>("Spreadsheet") 
    ..// 
    .ClientSideEvents(events => events.LoadComplete("loadComplete")) 
    ) 
 
 
[JS] 
 
 
    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() }); 
        else 
            xlElement.css({ "top": elemOffset.top, "left": elemOffset.left, "position": elemPos, "width": width, "height": height, "z-index": "" }); 
        xlObj.refreshSpreadsheet(); 
    } 
    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, 
 
 
Regards, 
Shanmugaraja K 


RD Richard de Zwart 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.

Richard

SK Shanmugaraja K Syncfusion Team 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. 
 
 
Regards, 
Shanmugaraja K 


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

Hi,

Implemented it today. Works beautifully, thanks!


Richard

SK Shanmugaraja K Syncfusion Team 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. 
 
Regards, 
Shanmugaraja K 


GW Gary Wong September 17, 2019 04:33 AM UTC

I've used the code above however the maximize button is added twice.

Events as follows;

1. Page loads & spreadsheet initialized.

 $('#Spreadsheet').ejSpreadsheet({
            loadComplete: "loadComplete",
            allowImport: true,
            allowExport: true,
            exportSettings:
            {
                allowExporting: true,
                excelUrl: "ExcelExport",
                csvUrl: "CsvExport",
                pdfUrl: "PdfExport"
            }    
            }); 

loadComplete binds the maximize button

2. I've saved my data as JSON in DB and passed this to the view in a ViewBag variable. On document ready I'm binding this to the spreadsheet with below;

            var xlObj = $("#Spreadsheet").data("ejSpreadsheet")
            var temp = JSON.parse(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(dataJson)));
            xlObj.loadFromJSON(temp);

This loads the json fine however it apparently recalls the loadComplete() function thus adding another maximize button. This seems to make the spreadsheet laggy as well.

Any way around this? 



VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 18, 2019 10:04 AM UTC

Hi Gary, 
 
Thank you for the update. 
 
We have checked your new reported issue and we are able to reproduce it in our end. The loadComplete evet triggers while loading the data using loadFromJSON method based on our behavior. To avoid this issue, we would suggest you to maintain the Boolean variable for tab group in ribbon as like in the below code example, 
 
Code Snippet 
<script type="text/javascript"> 
    var isTabAdded = false; 
    function loadComplete(args) { 
        var xlObj = this, xlElement = xlObj.element; 
        xlObj.setWidthToColumns([111, 128, 145, 192, 159, 218]); 
        xlObj.XLFormat.format({ "style": { "font-weight": "bold", "vertical-align": "middle", "text-align": "center" } }, "A1:F1"); 
        if (!isTabAdded) { 
            $('#Spreadsheet_Ribbon').ejRibbon({ "selectedItemIndex": 6 }) 
            var 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"); 
            isTabAdded = true; 
        } 
    } 
</script> 
 
For your convenience, we have modified our previously updated sample based on our suggestion. Please find the sample in below link, 
 
 
Could you please check the above sample and get back to us, if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


Loader.
Up arrow icon