Scrolling in ASP.NET Core Spreadsheet control

24 Jul 20268 minutes to read

Scrolling allows you to navigate quickly to different areas of a worksheet using the horizontal and vertical scrollbars. Set the allowScrolling property to true to enable scrolling in the Spreadsheet.

NOTE

The default value of the allowScrolling property is true.

The following table lists the scrolling options available in scrollSettings:

Property Type Default value Description
isFinite boolean false Specifies whether scrolling is restricted to the defined rows and columns.
enableVirtualization boolean true Specifies whether rows and columns are rendered dynamically based on the viewport.

Scroll through a worksheet

You can scroll through a worksheet in one of the following ways:

  • Use the arrow keys.
  • Use the horizontal and vertical scrollbars.
  • Use the mouse wheel.

Finite Scrolling

The isFinite property in scrollSettings supports the following scrolling modes:

  • Finite mode: Set isFinite to true to restrict scrolling to the defined rows and columns.
  • Infinite mode: Set isFinite to false to allow scrolling beyond the initially defined rows and columns.

NOTE

The default value of the isFinite property is false.

Virtual Scrolling

Virtual scrolling renders rows and columns dynamically based on the viewport instead of rendering the entire dataset at once. Set the enableVirtualization property in scrollSettings to true to enable virtual scrolling.

When virtualization is enabled, the Spreadsheet loads and renders additional data while scrolling.

NOTE

The default value of the enableVirtualization property is true.

Finite scrolling with defined rows and columns

To restrict scrolling to a defined number of rows and columns, set rowCount and colCount in the sheets property. Set isFinite to true and enableVirtualization to false in scrollSettings.

The following code example demonstrates finite scrolling with defined rows and columns. The rowCount and colCount properties are set to 20, so you cannot scroll beyond the 20th row or column.

<ejs-spreadsheet id="spreadsheet" created="createHandler">
    <e-spreadsheet-scrollsettings isFinite="true"></e-spreadsheet-scrollsettings>
    <e-spreadsheet-sheets>
        <e-spreadsheet-sheet rowCount="20" colCount="20">
            <e-spreadsheet-ranges>
                <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
            </e-spreadsheet-ranges>
            <e-spreadsheet-columns>
                <e-spreadsheet-column width="130"></e-spreadsheet-column>
                <e-spreadsheet-column width="92"></e-spreadsheet-column>
                <e-spreadsheet-column width="96"></e-spreadsheet-column>
                <e-spreadsheet-column width="130"></e-spreadsheet-column>
                <e-spreadsheet-column width="92"></e-spreadsheet-column>
                <e-spreadsheet-column width="96"></e-spreadsheet-column>
                <e-spreadsheet-column width="96"></e-spreadsheet-column>
            </e-spreadsheet-columns>
        </e-spreadsheet-sheet>
    </e-spreadsheet-sheets>
</ejs-spreadsheet>

<script>
    function createHandler() {
        //Applies format to specified range
        this.cellFormat({ fontWeight: 'bold' }, 'A1:F1');
    }
</script>
public IActionResult Index()
{
    List<object> data = new List<object>()
    {
        new { CustomerName= "Romona Heaslip",  Model= "Taurus",  Color= "Aquamarine",  PaymentMode= "Debit Card",  DeliveryDate= "07/11/2015",  Amount= "8529.22" },
        new { CustomerName= "Clare Batterton",  Model= "Sparrow",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/13/2016",  Amount= "17866.19" },
        new { CustomerName= "Eamon Traise",  Model= "Grand Cherokee",  Color= "Blue",  PaymentMode= "Net Banking",  DeliveryDate= "09/04/2015",  Amount= "13853.09" },
        new { CustomerName= "Julius Gorner",  Model= "GTO",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/15/2017",  Amount= "2338.74" },
        new { CustomerName= "Jenna Schoolfield",  Model= "LX",  Color= "Yellow",  PaymentMode= "Credit Card",  DeliveryDate= "10/08/2014",  Amount= "9578.45" },
        new { CustomerName= "Marylynne Harring",  Model= "Catera",  Color= "Green",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/01/2017",  Amount= "19141.62" },
        new { CustomerName= "Vilhelmina Leipelt",  Model= "7 Series",  Color= "Goldenrod",  PaymentMode= "Credit Card",  DeliveryDate= "12/20/2015",  Amount= "6543.30" },
        new { CustomerName= "Barby Heisler",  Model= "Corvette",  Color= "Red",  PaymentMode= "Credit Card",  DeliveryDate= "11/24/2014",  Amount= "13035.06" },
        new { CustomerName= "Karyn Boik",  Model= "Regal",  Color= "Indigo",  PaymentMode= "Debit Card",  DeliveryDate= "05/12/2014",  Amount= "18488.80" },
        new { CustomerName= "Jeanette Pamplin",  Model= "S4",  Color= "Fuscia",  PaymentMode= "Net Banking",  DeliveryDate= "12/30/2014",  Amount= "12317.04" },
        new { CustomerName= "Cristi Espinos",  Model= "TL",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/18/2013",  Amount= "6230.13" },
        new { CustomerName= "Issy Humm",  Model= "Club Wagon",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "02/02/2015",  Amount= "9709.49" },
        new { CustomerName= "Tuesday Fautly",  Model= "V8 Vantage",  Color= "Crimson",  PaymentMode= "Debit Card",  DeliveryDate= "11/19/2014",  Amount= "9766.10" },
        new { CustomerName= "Rosemaria Thomann",  Model= "Caravan",  Color= "Violet",  PaymentMode= "Net Banking",  DeliveryDate= "02/08/2014",  Amount= "7685.49" },
    };
    ViewBag.DefaultData = data;
    return View();
}