Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the allowScrolling as true.
By default, the
allowScrollingproperty is true.
You have the following options in Scrolling by using scrollSettings.
Finite scrolling supports two type of modes in scrolling. You can use the isFinite property in scrollSettings to specify the mode of scrolling.
isFinite property as true.isFinite property as false.By Default, the
isFiniteproperty isfalse.
enableVirtualization property in scrollSettings as true.In virtual scrolling enableVirtualization is set to true means, it allows you to load the spreadsheet data while scrolling.
By Default, the
enableVirtualizationproperty istrue.
User Interface:
You can scroll through the worksheet using one of the following ways,
arrow keys.scroll bars.mouse wheel.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 the finite scrolling with defined rows and columns in the spreadsheet. Here, we used rowCount as 20 and colCount as 20, after reaching the 20th row or 20th column you can’t able to scroll.
<template>
<ejs-spreadsheet ref="spreadsheet" :created="created" :allowScrolling="true" :scrollSettings="scrollSettings">
<e-sheets>
<e-sheet name="Price Details" rowCount="9" colCount="7">
<e-ranges>
<e-range :dataSource="dataSource1"></e-range>
</e-ranges>
<e-columns>
<e-column :width=100></e-column>
<e-column :width=100></e-column>
<e-column :width=100></e-column>
<e-column :width=100></e-column>
<e-column :width=100></e-column>
<e-column :width=100></e-column>
<e-column :width=100></e-column>
</e-columns>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</template>
<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
data: () => {
return {
scrollSettings: { isFinite: true },
dataSource1: priceData
}
},
methods: {
created: function () {
var spreadsheet = this.$refs.spreadsheet;
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.priceData = [
{
'Item Name': 'Casual Shoes',
'Date': '02/14/2019',
'Time': '11:34:32 AM',
'Quantity': 10,
'Price': 20,
'Amount': '=D2*E2',
'Discount': 1,
'Profit': 10
},
{
'Item Name': 'Sports Shoes',
'Date': '06/11/2019',
'Time': '05:56:32 AM',
'Quantity': 20,
'Price': 30,
'Amount': '=D3*E3',
'Discount': 5,
'Profit': 50
},
{
'Item Name': 'Formal Shoes',
'Date': '07/27/2019',
'Time': '03:32:44 AM',
'Quantity': 20,
'Price': 15,
'Amount': '=D4*E4',
'Discount': 7,
'Profit': 27
},
{
'Item Name': 'Sandals & Floaters',
'Date': '11/21/2019',
'Time': '06:23:54 AM',
'Quantity': 15,
'Price': 20,
'Amount': '=D5*E5',
'Discount': 11,
'Profit': 67
},
{
'Item Name': 'Flip- Flops & Slippers',
'Date': '06/23/2019',
'Time': '12:43:59 AM',
'Quantity': 30,
'Price': 10,
'Amount': '=D6*E6',
'Discount': 10,
'Profit': 70
},
{
'Item Name': 'Sneakers',
'Date': '07/22/2019',
'Time': '10:55:53 AM',
'Quantity': 40,
'Price': 20,
'Amount': '=D7*E7',
'Discount': 13,
'Profit': 66
},
{
'Item Name': 'Running Shoes',
'Date': '02/04/2019',
'Time': '03:44:34 AM',
'Quantity': 20,
'Price': 10,
'Amount': '=D8*E8',
'Discount': 3,
'Profit': 14
},
{
'Item Name': 'Loafers',
'Date': '11/30/2019',
'Time': '03:12:52 AM',
'Quantity': 31,
'Price': 10,
'Amount': '=D9*E9',
'Discount': 6,
'Profit': 29
},
{
'Item Name': 'Cricket Shoes',
'Date': '07/09/2019',
'Time': '11:32:14 AM',
'Quantity': 41,
'Price': 30,
'Amount': '=D10*E10',
'Discount': 12,
'Profit': 166
},
{
'Item Name': 'T-Shirts',
'Date': '10/31/2019',
'Time': '12:01:44 AM',
'Quantity': 50,
'Price': 10,
'Amount': '=D11*E11',
'Discount': 9,
'Profit': 55
}
];
exports.budgetData = [
{
'Expense Type': 'Housing',
'Projected Cost': 7000,
'Actual Cost': 7500,
'Difference': -500,
},
{
'Expense Type': 'Transportation',
'Projected Cost': 500,
'Actual Cost': 500,
'Difference': 0,
},
{
'Expense Type': 'Insurance',
'Projected Cost': 1000,
'Actual Cost': 1000,
'Difference': 0,
},
{
'Expense Type': 'Food',
'Projected Cost': 2000,
'Actual Cost': 1800,
'Difference': 200,
},
{
'Expense Type': 'Pets',
'Projected Cost': 300,
'Actual Cost': 200,
'Difference': 100,
},
{
'Expense Type': 'Personel Care',
'Projected Cost': 500,
'Actual Cost': 500,
'Difference': 0,
},
{
'Expense Type': 'Loan',
'Projected Cost': 1000,
'Actual Cost': 1000,
'Difference': 0,
},
{
'Expense Type': 'Tax',
'Projected Cost': 200,
'Actual Cost': 200,
'Difference': 0,
},
{
'Expense Type': 'Savings',
'Projected Cost': 1000,
'Actual Cost': 900,
'Difference': 100,
},
{
'Expense Type': 'Total',
'Projected Cost': 13500,
'Actual Cost': 13600,
'Difference': -100,
}
];
});You can refer to our Vue Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our Vue Spreadsheet example to knows how to present and manipulate data.