<!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>