Using suspendDirty and resumeDirty

SpreadJS allows users to fetch the details of the cell values that have been changed in the worksheet by marking the dirty status of the cells. This option provides information on cell modifications but it also causes a lot of performance overhead especially when users need to execute sorting operation on the bulk data.

For performance tuning, it is recommended to use the suspendDirty method and the resumeDirty method.

The suspendDirty method stops SpreadJS from marking the dirty status in the cells until the sorting is complete and the resumeDirty method allows you to restore the dirty status of the cells as and when required. Both of these methods enhance performance to a great extent.

Refer to the following code snippet in order to use suspendDirty method and resumeDirty method in order to improve performance while working with SpreadJS.

JavaScript	Copy Code
var startTime, endTime; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); var sheet = spread.getActiveSheet(); var data = generateData(50000); var colInfos = generateBindingColumnInfos(7); loadingData(sheet, colInfos, data); spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (sneder, args) { // Calling suspendDirty() method to stop the marking sorted cells dirty sheet.suspendDirty(); }); spread.bind(GC.Spread.Sheets.Events.RangeSorted, function (sender, args) { // Calling resumeDirty() method to restore dirty status of cells sheet.resumeDirty(); }); }; function loadingData(sheet, colInfos, data) { sheet.suspendPaint(); sheet.autoGenerateColumns = false; sheet.bindColumns(colInfos); sheet.setDataSource(data); sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, sheet.getRowCount(), sheet.getColumnCount()))); sheet.resumePaint(); } function generateData(itemCount) { var data = []; var countries = ["China", "American", "UK", "Japan", "France"]; var products = ["Computer", "Car", "Others"]; var colors = ["Red", "Green", "Blue", "White", "Black", "Yellow", "Pink", "Orange"]; var dt = new Date(); for (var i = 0; i < itemCount; i++) { var item = { id: i, date: new Date(dt.getFullYear(), i % 12, 1), country: countries[Math.floor(Math.random() * countries.length)], product: products[Math.floor(Math.random() * products.length)], color: colors[Math.floor(Math.random() * colors.length)], amount: 1000 + Math.random() * 10000, big: Math.random() > .5 }; data.push(item); } return data; } function generateBindingColumnInfos(colCount) { var bindColumnInfos = [ { name: "id", displayName: "ID", size: 60 }, { name: "product", displayName: "Product", size: 90 }, { name: "country", displayName: "Country", size: 90 }, { name: "amount", displayName: "Amount", size: 90, formatter: "#,##0" }, { name: "date", displayName: "Date", size: 90, formatter: 'yyyy-mm-dd' }, { name: "color", displayName: "Color", size: 85 }, { name: "big", displayName: "Big", size: 90, cellType: new GC.Spread.Sheets.CellTypes.CheckBox() } ]; return bindColumnInfos; }

JavaScript

Copy Code

var startTime, endTime;

window.onload = function () {

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var data = generateData(50000);
var colInfos = generateBindingColumnInfos(7);
loadingData(sheet, colInfos, data);

spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (sneder, args) {

// Calling suspendDirty() method to stop the marking sorted cells dirty
sheet.suspendDirty();
});

spread.bind(GC.Spread.Sheets.Events.RangeSorted, function (sender, args) {

// Calling resumeDirty() method to restore dirty status of cells
sheet.resumeDirty();
});

};

function loadingData(sheet, colInfos, data)
{
sheet.suspendPaint();
sheet.autoGenerateColumns = false;
sheet.bindColumns(colInfos);
sheet.setDataSource(data);
sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, sheet.getRowCount(), sheet.getColumnCount())));
sheet.resumePaint();
}

function generateData(itemCount) {
var data = [];
var countries = ["China", "American", "UK", "Japan", "France"];
var products = ["Computer", "Car", "Others"];
var colors = ["Red", "Green", "Blue", "White", "Black", "Yellow", "Pink", "Orange"];
var dt = new Date();

for (var i = 0; i < itemCount; i++)
{
var item =
{
id: i,
date: new Date(dt.getFullYear(), i % 12, 1),
country: countries[Math.floor(Math.random() * countries.length)],
product: products[Math.floor(Math.random() * products.length)],
color: colors[Math.floor(Math.random() * colors.length)],
amount: 1000 + Math.random() * 10000,
big: Math.random() > .5
};
data.push(item);
}
return data;
}

function generateBindingColumnInfos(colCount) {
var bindColumnInfos = [
{ name: "id", displayName: "ID", size: 60 },
{ name: "product", displayName: "Product", size: 90 },
{ name: "country", displayName: "Country", size: 90 },
{ name: "amount", displayName: "Amount", size: 90, formatter: "#,##0" },
{ name: "date", displayName: "Date", size: 90, formatter: 'yyyy-mm-dd' },
{ name: "color", displayName: "Color", size: 85 },
{ name: "big", displayName: "Big", size: 90, cellType: new GC.Spread.Sheets.CellTypes.CheckBox() }
];
return bindColumnInfos;
}