tests/scrolling benchmarks.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid Scrolling Benchmark</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../examples/examples.css" type="text/css" media="screen" charset="utf-8" />
		<style>
		.cell-title {
			font-weight: bold;
		}

		.cell-effort-driven {
			text-align: center;
		}
		</style>
	</head>
	<body>
		<script src="../lib/firebugx.js"></script>
		<script src="../lib/jquery-1.7.min.js"></script>
		<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
		<script src="../lib/jquery.event.drag-2.2.js"></script>

		<script src="../slick.core.js"></script>
		<script src="../slick.grid.js"></script>
		<script src="../slick.formatters.js"></script>

		<button onclick="grid.debug()">Debug info</button>
		<button onclick="startBench(100)">Run (+= 100px)</button>
		<button onclick="startBench(300)">Run (+= 300px)</button>
		<button onclick="startBench(550)">Run (+= 550px; simulate paging)</button>
		<button onclick="startBench(1000)">Run (+= 1'000px)</button>
		<button onclick="startBench(5000)">Run (+= 5'000px)</button>
		<hr/>

		<div id="myGrid" style="width:600px;height:600px;"></div>

		<script>
		var grid;
		var data = [];
        var extraColumns = 100;

		function testPostRender(cellNode, row, dataContext, colDef) {
			cellNode.style.backgroundColor = 'yellow';
		}

		var columns = [
			{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"},
			{id:"duration", name:"Duration", field:"duration", selectable:false},
			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:Slick.Formatters.PercentCompleteBar},
			{id:"start", name:"Start", field:"start", minWidth:60},
			{id:"finish", name:"Finish", field:"finish", minWidth:60},
			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:Slick.Formatters.Checkmark, asyncPostRender:testPostRender}
		];

        for (var i=0; i<extraColumns; i++) {
            columns.push({id:"col" + i, name:"col" + i, field:"title"});
        }

		var options = {
			editable: false,
			enableAddRow: false,
			enableCellNavigation: true,
			enableAsyncPostRender: true,
            forceFitColumns: false
		};


		$(function()
        {
            // prepare the data
            for (var i = 0; i < 5000; i++) {
                var d = (data[i] = {});

                d["id"] = "id_" + i;
                d["title"] = "Task " + i;
                d["duration"] = "5 days";
                d["percentComplete"] = Math.round(Math.random() * 100);
                d["start"] = "01/01/2009";
                d["finish"] = "01/05/2009";
                d["effortDriven"] = (i % 5 == 0);
            }


            data.getItemMetadata = function (row) {
              if (row % 2 === 1) {
                return {
                  "columns": {
                    "duration": {
                      "colspan": 3
                    }
                  }
                };
              }
            };

            // initialize the grid
            grid = new Slick.Grid("#myGrid", data, columns, options);

            $grid = $("#myGrid div.grid-canvas").parent();
        });


        var $grid;
        var lastScrollTop = 0;
        var startTime;
        var scrollAmount = 1000;

		function startBench(scroll) {
			scrollAmount = scroll;
			lastScrollTop = 0;
			$grid.scrollTop(0);

			window.setTimeout(function(){
				startTime = new Date();
				bench();
			}, 500);
		}

        function bench() {
            var scrollTop = $grid[0].scrollTop = lastScrollTop + scrollAmount;

            if ($grid[0].scrollTop == lastScrollTop + scrollAmount) {
                lastScrollTop = scrollTop;
                window.setTimeout(bench, 10);
            }
            else {
				alert((new Date() - startTime));
            }
        }

		</script>
	</body>
</html>