Scrolling in EJ2 JavaScript Spreadsheet Control

27 Jul 20266 minutes to read

Scrolling helps you move quickly to different areas of the worksheet. It moves faster when you use the horizontal and vertical scroll bars. Scrolling can be enabled by setting the allowScrolling property to true.

The default value for allowScrolling property is true.

The scrollSettings property provides the following scrolling options:

  • Finite scrolling.
  • Virtual scrolling.

Finite Scrolling

The Finite scrolling option supports two types of modes. You can use the isFinite property in scrollSettings to specify the mode of scrolling.

  • Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the isFinite property to true.

  • Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the isFinite property to false.

By default, the isFinite property is false.

Virtual Scrolling

  • Virtual scrolling allows you to load data on demand (based on the viewport size) without buffering the entire large dataset. You can enable virtual scrolling by setting the enableVirtualization property in scrollSettings to true.

When enableVirtualization is set to true, the spreadsheet loads data while you scroll.

By default, the enableVirtualization property is true.

User Interface:

You can scroll through the worksheet using one of the following ways:

  • Using the arrow keys.
  • Using the Horizontal and Verticalscroll bars.
  • Using the mouse wheel.

Finite scrolling with defined rows and columns

If you want to perform scrolling with defined rows and columns, you must define rowCount and colCount in the sheets property and set isFinite as true and enableVirtualization as false in scrollSettings.

The following code example shows finite scrolling with defined rows and columns in the spreadsheet. Here, rowCount is set to 20 and colCount is set to 20. After reaching the 20th row or 20th column, you cannot scroll further.

var columns = [
    {
        width: 100
    },
    {
        width: 92
    },
    {
        width: 96
    },
    {
        width: 110
    },
    {
        width: 92
    },
    {
        width: 96
    },
    {
        width: 96
    }
];

var spreadsheet = new ej.spreadsheet.Spreadsheet({
    sheets: [{ name: 'Price Details', ranges: [{ dataSource: defaultData }], columns: columns, rowCount: 9, colCount: 7 }],
    allowScrolling: true,
    scrollSettings: { isFinite: true }
});

// Render initialized Spreadsheet.
spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html><html lang="en"><head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript UI Controls">
        <meta name="author" content="Syncfusion">
        <link rel="shortcut icon" href="resources/favicon.ico">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-spreadsheet/styles/tailwind3.css" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <!--Element which is going to render-->
        
       <div id="container">
       <div id="spreadsheet"></div>
       </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>