nicknisi/.gitignore

## .gitignore
components/

## README.md

      
    Raw
  

              README.md
            
          
    DGrid Scrolling Error

Setup

bower install
ruby store.rb

Reproducing

To reproduce in Chrome or Firefox, navigate to http://localhost:4567. Then, Quickly scroll the grid. Make sure you
have the console open to see the error.
Example Video


## bower.json
{
  "name": "dgrid-bug",
  "version": "0.0.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
    "dojo": "~1.9.0",
    "dijit": "~1.9.0",
    "xstyle": "~0.1.3",
    "put-selector": "~0.3.4",
    "dgrid": "https://github.com/SitePen/dgrid.git"
  }
}

## dgrid_bug.gif

      
    Raw
  

              dgrid_bug.gif
            
          
## performance.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test Performance</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=570" />
        <style type="text/css">
            @import "dojo/resources/dojo.css";
            @import "dgrid/css/dgrid.css";
            @import "dgrid/css/skins/tundra.css";
            .heading {
                font-weight: bold;
                margin-left: 12px;
                padding-bottom: 0.25em;
            }
            .ui-widget{
                margin: 10px;
            }
            /* this is not part of theme, but you can add odd-even coloring this way*/
            .dgrid-row-odd {
                background: #F2F5F9;
            }

            #grid {
                width: 68em;
                height: 50em;
                padding: 1px;
            }
        </style>
        <script>
            var dojoConfig = {
                async: true
            };
        </script>
        <script type="text/javascript" src="dojo/dojo.js"></script>
    <script type="text/javascript">
        require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/Keyboard", "dojo/_base/declare", "dgrid/test/data/perf", "dojo/store/JsonRest", "dgrid/editor", "dijit/form/CheckBox", "dojo/domReady!"],
                function(List, Grid, Selection, Keyboard, declare, testPerfStore, JsonRestStore, editor, CheckBox){
                    var store = new JsonRestStore({
                        target : 'http://localhost:4567/data',
                        idAttribtue : 'id'
                    });
                    var columns = [
                        editor({
                        editor : CheckBox,
                        editorArgs : { value : true },
                        autoSave : true,
                        label : 'Included?',
                        field : 'checkbox',
                        sortable : false,
                        editable : true
                    }),
                    { name: 'Column 0', field: 'id', width: '10%' },
                    { name: 'Column 1', field: 'integer', width: '10%' },
                    { name: 'Column 2', field: 'floatNum', width: '10%' },
                    { name: 'Column 3', field: 'date', width: '10%' },
                    { name: 'Column 4', field: 'date2', width: '10%' },
                    { name: 'Column 5', field: 'text', width: '10%' },
                    { name: 'Column 6', field: 'bool', width: '10%' },
                    { name: 'Column 7', field: 'bool2', width: '10%' },
                    { name: 'Column 8', field: 'price', width: '10%' },
                    { name: 'Column 9', field: 'today', width: '10%' }
                    ];
                    var start = new Date().getTime();
                    window.grid = new (declare([Grid, Selection, Keyboard]))({
                        store: store,
                        columns: columns
                    }, "grid");
                    console.log("startup time", new Date().getTime() - start);
                    var processScroll = grid._processScroll;
                    grid._processScroll = function(){
                        var start = new Date().getTime();
                        processScroll.call(this);
                        console.log("scroll time", new Date().getTime() - start);
                    };
                });

    </script>
</head>
<body class="tundra">
    <h2 class="heading">A performance test designed to go head to head with DataGrid's test_datagrid_performance.html</h2>
    <div id="grid"></div>
</body>
</html>

## store.rb
require 'json'
require 'sinatra'

set :public_folder, Proc.new { File.join(root, "components") }

data = []

NUM_RECORDS = 20000

(1..NUM_RECORDS).each do |i|
  data.push(
    :checkbox => Random.rand(1..100) > 50,
    :id => i,
    :integer => Random.rand(1..100),
    :floatNum => Random.rand(1..100),
    :date => Date.new,
    :date2 => Date.new,
    :text => "A number in text #{Random.rand(1..i)}",
    :bool => Random.rand(1..100) > 50,
    :bools => Random.rand(1..100) > 50,
    :price => Random.rand(1..100) * 0.5,
    :today => Date.new
  )
end

get '/' do
  File.read('performance.html')
end

get '/data' do
  content_type 'application/json'
  first, last = request.env['HTTP_RANGE'].split('=')[1].split('-').map { |val| val.to_i }

  # convert to ints
  first = first.to_i
  last = last.to_i

  count = last - first

  payload = data[first..last]

  response['Content-Range'] = "items #{first}-#{last}/#{NUM_RECORDS}"
  body { payload.to_json }
end
	{
	"name": "dgrid-bug",
	"version": "0.0.0",
	"ignore": [
	"*/.",
	"node_modules",
	"components"
	],
	"dependencies": {
	"dojo": "~1.9.0",
	"dijit": "~1.9.0",
	"xstyle": "~0.1.3",
	"put-selector": "~0.3.4",
	"dgrid": "https://github.com/SitePen/dgrid.git"
	}
	}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>Test Performance</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=570" />
	<style type="text/css">
	@import "dojo/resources/dojo.css";
	@import "dgrid/css/dgrid.css";
	@import "dgrid/css/skins/tundra.css";
	.heading {
	font-weight: bold;
	margin-left: 12px;
	padding-bottom: 0.25em;
	}
	.ui-widget{
	margin: 10px;
	}
	/* this is not part of theme, but you can add odd-even coloring this way*/
	.dgrid-row-odd {
	background: #F2F5F9;
	}

	#grid {
	width: 68em;
	height: 50em;
	padding: 1px;
	}
	</style>
	<script>
	var dojoConfig = {
	async: true
	};
	</script>
	<script type="text/javascript" src="dojo/dojo.js"></script>
	<script type="text/javascript">
	require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/Keyboard", "dojo/_base/declare", "dgrid/test/data/perf", "dojo/store/JsonRest", "dgrid/editor", "dijit/form/CheckBox", "dojo/domReady!"],
	function(List, Grid, Selection, Keyboard, declare, testPerfStore, JsonRestStore, editor, CheckBox){
	var store = new JsonRestStore({
	target : 'http://localhost:4567/data',
	idAttribtue : 'id'
	});
	var columns = [
	editor({
	editor : CheckBox,
	editorArgs : { value : true },
	autoSave : true,
	label : 'Included?',
	field : 'checkbox',
	sortable : false,
	editable : true
	}),
	{ name: 'Column 0', field: 'id', width: '10%' },
	{ name: 'Column 1', field: 'integer', width: '10%' },
	{ name: 'Column 2', field: 'floatNum', width: '10%' },
	{ name: 'Column 3', field: 'date', width: '10%' },
	{ name: 'Column 4', field: 'date2', width: '10%' },
	{ name: 'Column 5', field: 'text', width: '10%' },
	{ name: 'Column 6', field: 'bool', width: '10%' },
	{ name: 'Column 7', field: 'bool2', width: '10%' },
	{ name: 'Column 8', field: 'price', width: '10%' },
	{ name: 'Column 9', field: 'today', width: '10%' }
	];
	var start = new Date().getTime();
	window.grid = new (declare([Grid, Selection, Keyboard]))({
	store: store,
	columns: columns
	}, "grid");
	console.log("startup time", new Date().getTime() - start);
	var processScroll = grid._processScroll;
	grid._processScroll = function(){
	var start = new Date().getTime();
	processScroll.call(this);
	console.log("scroll time", new Date().getTime() - start);
	};
	});

	</script>
	</head>
	<body class="tundra">
	<h2 class="heading">A performance test designed to go head to head with DataGrid's test_datagrid_performance.html</h2>
	<div id="grid"></div>
	</body>
	</html>
	require 'json'
	require 'sinatra'

	set :public_folder, Proc.new { File.join(root, "components") }

	data = []

	NUM_RECORDS = 20000

	(1..NUM_RECORDS).each do \|i\|
	data.push(
	:checkbox => Random.rand(1..100) > 50,
	:id => i,
	:integer => Random.rand(1..100),
	:floatNum => Random.rand(1..100),
	:date => Date.new,
	:date2 => Date.new,
	:text => "A number in text #{Random.rand(1..i)}",
	:bool => Random.rand(1..100) > 50,
	:bools => Random.rand(1..100) > 50,
	:price => Random.rand(1..100) * 0.5,
	:today => Date.new
	)
	end

	get '/' do
	File.read('performance.html')
	end

	get '/data' do
	content_type 'application/json'
	first, last = request.env['HTTP_RANGE'].split('=')[1].split('-').map { \|val\| val.to_i }

	# convert to ints
	first = first.to_i
	last = last.to_i

	count = last - first

	payload = data[first..last]

	response['Content-Range'] = "items #{first}-#{last}/#{NUM_RECORDS}"
	body { payload.to_json }
	end