Setting limits to the ZoomSlider within the StatusBar break on ctrl+scroll zoom

Posted by: davide.vago on 28 January 2020, 4:06 am EST

    • Post Options:
    • Link

    Posted 28 January 2020, 4:06 am EST

    Good morning/afternoon,

    I’m following up the configuration of the StatusBar post as I found a weird behaviour.

    Apparently setting up min/max does work within the UI (the user is able just to zoom in/out within the range set by



    statusBar.get(“zoomSlider”).min = 80;

    statusBar.get(“zoomSlider”).max = 150;

    However, I noticed that the user can trigger the zooming system via keyboard using the Ctrl + scroll and apparently this shortcut doesn’t care about the limits.

    Ref:

    https://www.grapecity.com/forums/spread-sheets/options-for-customise-sett_1

  • Posted 28 January 2020, 5:16 pm EST

    Hi Davide,

    To limit the amount of zoom using the ctrl+scroll, we need to handle the UserZooming event. Please refer to the following code snippet and the sample demonstrating the same:

    // limit ctrl + zoom too
      spread.bind(GC.Spread.Sheets.Events.UserZooming, function(e, args) {
        let _z = clamp(args.newZoomFactor, 0.8, 1.5);
        if (args.newZoomFactor !== _z) {
          args.sheet.zoom(_z);
          Promise.resolve().then(() => {
            statusBar.update();
          });
        }
      });
    

    https://codesandbox.io/s/spread-js-starter-wz684

    Further, we have also created an enhancement request to support configuration options for limiting the user zoom. The internal tracking ID for the case is SJS-3284. We will keep you notified of the updates regarding the same.

    Regards

    Sharad

  • Posted 28 January 2020, 10:27 pm EST

    Thanks Sharad,

    Unfortunately the solution you coded works perfectly fine in your plain JS example but as soon as I import in our VUE app with the spread instance being in a global variable of our app it doesn’t care about the limit. I could share some snippet of the code via internal support board but the logic of initialising the spreadsheet is basically the same as the one you handled (case id: 416061)

  • Posted 29 January 2020, 5:29 pm EST

    Hi Davide,

    I tried the above code snippet in the sample shared in case #416061 and everything seemed to be working fine, I added the following code in the initSpread() method:

    this.spreadSheet.bind(GC.Spread.Sheets.Events.UserZooming, function(
            e,
            args
          ) {
            let _z = clamp(args.newZoomFactor, 0.8, 1.5);
            if (args.newZoomFactor !== _z) {
              args.sheet.zoom(_z);
              Promise.resolve().then(() => {
                // statusBar.update();
              });
            }
          });
    

    If the issue persists, I would request you to share a sample.

    PS: statusBar.update(); is commemted out because the sample didn’t have status bar.

    Regards

  • Posted 4 February 2020, 7:42 pm EST

    Hi Davide,

    The dev team has suggested overriding the zoom method to limit the zoom percentage.

    Please refer to the following code snippet and the sample demonstrating the same:

    // limit zoom
    var zoomFn = GC.Spread.Sheets.Worksheet.prototype.zoom;
    GC.Spread.Sheets.Worksheet.prototype.zoom = function(factor) {
      var self = this;
    
      if (arguments.length > 0) {
        factor = parseFloat(factor);
        factor = clamp(factor, 0.8, 1.5);
        return zoomFn.apply(this, [factor]);
      }
      return zoomFn.apply(this);
    };
    

    https://codesandbox.io/s/spread-js-starter-khime

    Regards

    Sharad

  • Posted 26 July 2020, 7:18 pm EST

    Hi Davide,

    In the latest version, we have now added ViewZooming and ViewZoomed event to limit zoom. Please update to the latest build and let us know if you face any issues. You may download the latest version using the following link: http://cdn.grapecity.com/spreadjs/13.2.0/Files/SpreadJS.Release.13.2.0.zip

    API references:

    • ViewZooming event: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.Events~ViewZooming_EV.html

    • ViewZoomed event: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.Events~ViewZoomed_EV.html

    Regards

  • Posted 26 July 2020, 8:39 pm EST

    Hi Sharad,

    Thank you for getting back with this. I’ve updated the version and removed the above hack in favour of these 2 new listeners.

    Everything looks good, thanks for addressing this issue.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels