Zoom spreadsheet to full-screen

[Richard de Zwart]

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

[Shanmugaraja K]

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, 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128457/ze/SyncfusionMvcApplication3-1505278638  

 

Regards, 

Shanmugaraja K 

[Richard de Zwart]

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

[Shanmugaraja K]

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. 

 

Help Documentation: https://help.syncfusion.com/api/js/ejspreadsheet#methods:xlribbon-addtabgroup  

 

Regards, 

Shanmugaraja K 

[Richard de Zwart]

Hi,

Implemented it today. Works beautifully, thanks!

Richard

[Shanmugaraja K]

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 

[Gary Wong]

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? 

[Vinoth Kumar Sundara Moorthy]

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, 

 

https://www.syncfusion.com/downloads/support/forum/128457/ze/SyncfusionMvcApplication3864589706 

 

Could you please check the above sample and get back to us, if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S