test/Rest.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Rest store</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dojo/resources/dojo.css";
			@import "../css/dgrid.css";
			@import "../css/skins/claro.css";

			body {
				padding-left: 2rem;
			}

			h2 {
				margin: 12px;
			}

			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}

			.dgrid {
				margin: 10px;
			}
		</style>
	</head>

	<body class="claro">
		<div id="selectServerForm"></div>

		<h2>A basic grid with Rest store</h2>
		<div id="grid"></div>

		<h2>A basic grid with Rest store using range headers</h2>
		<div id="gridRangeHeaders"></div>

		<script>
			var dojoConfig = {
				async: true,
				requestProvider: 'dojo/request/registry'
			};
		</script>
		<script src="../../dojo/dojo.js"></script>
		<script>
			require([
				'dojo/_base/lang',
				'dojo/Deferred',
				'dojo/query',
				'dgrid/List',
				'dgrid/OnDemandGrid',
				'dgrid/Selection',
				'dgrid/Editor',
				'dgrid/Keyboard',
				'dgrid/Tree',
				'dgrid/test/widgets/SelectServer',
				'dstore/Rest',
				'dstore/Trackable',
				'dstore/Cache',
				'dstore/Tree'
			], function (lang, Deferred, query, List, Grid, Selection, Editor, Keyboard, Tree,
				SelectServer, Rest, Trackable, Cache, TreeStore) {

				var ENABLE_DEBUG_LOG = false; // set to true to enable logging preload info
				var selectServer = new SelectServer({}, document.getElementById('selectServerForm'));

				selectServer.startup();
				selectServer.startupPromise.then(function () {
					var CustomGrid = Grid.createSubclass([ Selection, Keyboard, Editor, Tree ], {
						insertRow: function () {
							refreshed = true;
							return this.inherited(arguments);
						},

						removeRow: function () {
							refreshed = true;
							return this.inherited(arguments);
						},

						logPreload: function () {
							var line = '';
							for (var i = 0; i < 100; i++) {
								line += '\u2500';
							}
							console.log(line);
							var preload = this.preload;
							if (preload) {
								while (preload.previous) {
									preload = preload.previous;
								}
								var preloads = [];
								var preloadNodes = [];
								var height = 0;
								var totalPossibleRows = 0;
								while (preload) {
									preloads.push(preload);
									var node = preload.node;
									height += node.offsetHeight;
									totalPossibleRows += preload.count;
									preloadNodes.push({
										preloadId: node.getAttribute('data-preloadid'),
										rowIndex: node.rowIndex,
										height: node.style.height,
										offsetTop: node.offsetTop,
										offsetHeight: node.offsetHeight
									});
									preload = preload.next;
								}
								console.table(preloads);
								console.table(preloadNodes);
								var realRowCount = query('.dgrid-row', grid.contentNode).length;
								height += 24 * realRowCount;
								totalPossibleRows += realRowCount;
								console.log('Height calculated from preloads = ', height);
								console.log('Actual grid content height = ', gridContentHeight());
								console.log('Total possible rows = ', totalPossibleRows);
								console.log('Current row count = ', realRowCount);
							}
						}
					});

					function createStore(config) {
						var store = new (Rest.createSubclass([ Trackable, Cache, TreeStore ]))(lang.mixin({
							target: selectServer.get('targetUrl'),
							put: function (object) {
								var dfd = new Deferred();
								dfd.resolve(object);
								return dfd.promise;
							}
						}, config));

						store.getRootCollection = function () {
							return this.root.filter({ parent: undefined });
						};

						return store;
					}

					function getColumns() {
						return [
							{ label: 'Name', field: 'name', sortable: false, renderExpando: true },
							{ label: 'Id', field: 'id' },
							{ label: 'Comment', field: 'comment', sortable: false, editor: 'text' },
							{ label: 'Boolean', field: 'boo', sortable: false, autoSave: true, editor: 'checkbox' }
						];
					}

					window.grid = new CustomGrid({
						pagingMethod: 'throttleDelayed',
						collection: createStore().getRootCollection(),
						sort: 'id',
						getBeforePut: false,
						columns: getColumns()
					}, 'grid');

					var refreshed = false;
					var prevContentHeight = 0;

					if (ENABLE_DEBUG_LOG) {
						setInterval(function () {
							var contentHeight = gridContentHeight();
							if (refreshed || prevContentHeight != contentHeight) {
								prevContentHeight = contentHeight;
								refreshed = false;
								grid.logPreload();
							}
						}, 1500);
					}

					function gridContentHeight() {
						var contentHeight = 0;
						var childNodes = grid.contentNode.childNodes;
						var len = childNodes.length;
						for (var i = 0; i < len; i++) {
							contentHeight += childNodes[i].offsetHeight;
						}
						return contentHeight;
					}

					new CustomGrid({
						collection: createStore({ useRangeHeaders: true }).getRootCollection(),
						sort: 'id',
						getBeforePut: false,
						columns: getColumns()
					}, 'gridRangeHeaders');
				});
			});
		</script>
	</body>
</html>