# Zoom

A tutorial showing how the zoom functionality works in SpreadJS, including the zoom limit

## Content

SpreadJS allows you to perform zoom operations to zoom in or zoom out the viewport of a sheet. You can also set a particular zoom limit.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/czoom.png?width=400)

> **Note**:
>
> * The cell size and its contents will zoom in or out along with the viewport.
> * Borders, gridlines, freeze lines, split bars, and the selection indicator are not affected while zooming.

## Perform Zoom Operation

To perform zoom-in or zoom-out operations, you can use any of the following methods:

* Ctrl + Mousewheel
* Status bar's zoom indicator
* Two fingers zoom operation (on touch devices only)
* API member `sheet.zoom` (`zoomFactor`)

By using `sheet.zoom`(`zoomFactor`), you can set the zoom factor to any value between 0.1 and 4. The zoom operation is enabled by default. However, you can choose to disable it by setting **options.allowUserZoom** property to false.
**Using Code**
This example sets the **options.allowUserZoom** property.

```javascript
activeSheet.zoom(3);
```

## Set Zoom Limit

When a zoom operation is performed, **ViewZooming** and **ViewZoomed** events are triggered. These events can be used to intervene the zoom process and apply any operation, like setting the minimum or maximum zoom limit of a viewport.
**Using Code**
This example sets the minimum and maximum zoom limit of a spreadsheet's viewport by using **newZoomFactor** argument.

```javascript
// Limit zoom action by newZoomFactor argument
// set allowUserZoom to true
spread.options.allowUserZoom = true;
activeSheet.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, info) {
    if (info.newZoomFactor >= 2) {
        info.newZoomFactor = 2; // the max zoom factor is 2
    }
    if (info.newZoomFactor < 1) {
        info.newZoomFactor = 0.5; // the min zoom factor is 0.5
    }
});
```

This example sets the maximum zoom limit of a spreadsheet's viewport by using **cancel** argument.

```javascript
//Limit zoom action by cancel argument
//set allowUserZoom to true
spread.options.allowUserZoom = true;

activeSheet.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, info) {
    if (info.newZoomFactor >= 2) {
       info.cancel = true; // cancel this zooming action
    }
});
```

## Using Designer

You can also perform zoom operations by using the SpreadJS Designer.
To quickly zoom in or zoom out the sheet's viewport, use the **Zoom** slider on the status bar and adjust the magnification level. You can click and drag the Zoom slider to the right or left to zoom in or zoom out. You can also use the – or + symbols to gradually zoom in or zoom out.

![zoom slider](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/zoom%20slider.b7b97e.png)

Another method of zooming in the SpreadJS Designer is by using the zoom options available in the **Zoom** group on the **View** tab.

![zoom group](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/zoom%20group.8dc675.png?width=800)

This group has the following options:

* **Zoom**: Select the magnification level you want to use from the list.
<br>
    ![zoom button](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/zoom%20button.6fb3ab.png?width=200)
<br>
    <br>
* **100%**: Select to view the sheet's viewport to 100% zoom of its original size.
* **Zoom to Selection**: Select to maximize the view of the selected cells only.