Scrolling in ASP.NET MVC Spreadsheet Control

23 Jul 20267 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.

You have the following options in Scrolling by using scrollSettings.

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 fixed number of rows and columns, define the rowCount and colCount properties in the sheet model, set isFinite to true, and set enableVirtualization to false in scrollSettings.

The following example demonstrates finite scrolling with a fixed sheet size. The rowCount and colCount properties are both set to 20; therefore, scrolling is restricted to the twentieth row and twentieth column.

@Html.EJS().Spreadsheet("spreadsheet").AllowScrolling(true).Created("createHandler").ScrollSettings(scrollSettings =>
   {
       scrollSettings.IsFinite(true);
   }).Sheets(sheet =>
{
    sheet.Name("Price Details").RowCount(9).ColCount(7).Ranges(ranges =>
    {
        ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();

    }).Columns(column =>
    {
        column.Width(110).Add();
        column.Width(92).Add();
        column.Width(96).Add();
        column.Width(110).Add();
        column.Width(92).Add();
        column.Width(96).Add();
        column.Width(96).Add();
    }).Add();
}).Render()

<script>
    function createHandler() {
        //Applies format to specified range
        this.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
    }
</script>
public ActionResult 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();
}