Laboratory demo: fix code generation for grid with Tree (#1463)

Laboratory
* fix tree usage and generated code
* update formatter for dgrid 1.3.0
* remove unused code

Tree: improve documentation about dstore/Tree and data format

Fixes #1335

demos/laboratory/widgets/ColumnGrid.js

@@ -54,8 +54,10 @@ define([
  config: {
  label: '',
  formatter: function () {
- return '<i class="icon-times" title="' + i18n['delete'] + '"></i>' +
- '<i class="icon-gear" title="' + i18n.edit + '"></i> ';
+ return {
+ html: '<i class="icon-times" title="' + i18n['delete'] + '"></i>' +
+ '<i class="icon-gear" title="' + i18n.edit + '"></i> '
+ };
  },
  sortable: false
  }

demos/laboratory/widgets/Laboratory.js

@@ -216,6 +216,9 @@ define([
  gridConfig.dataCreation += '\n\t\t\t\titem.hasChildren = false;';
  gridConfig.dataCreation += '\n\t\t\t\titem.parent = i % 2;';
  gridConfig.dataCreation += '\n\t\t\t}';
+ gridConfig.dataCreation += '\n\t\t\telse {';
+ gridConfig.dataCreation += '\n\t\t\t\titem.parent = null;';
+ gridConfig.dataCreation += '\n\t\t\t}';
  }
 
  gridConfig.dataCreation += '\n\t\t\tdata.push(item);' +
@@ -231,10 +234,6 @@ define([
  dependencies.push('dstore/Tree');
  callbackParams.push('TreeStoreMixin');
  }
-
- gridConfig.storeDeclaration = '\n\tvar store = new (declare([ Memory, Trackable ]))({\n' +
- '\t\tdata: data\n\t});\n';
- gridConfig.storeAssignment = '\n\tgrid.set(\'collection\', store);';
  }
  else {
  gridConfig.gridRender = '\n\tgrid.renderArray(data);';
@@ -256,7 +255,11 @@ define([
  }, this);
 
  if (hasStore) {
- gridConfig.gridOptions += '\t\tcollection: store,\n';
+ gridConfig.gridOptions += '\t\tcollection: store';
+ if (treeExpandoColumn) {
+ gridConfig.gridOptions += '.getRootCollection()';
+ }
+ gridConfig.gridOptions += ',\n';
  }
 
  gridConfig.gridOptions += toJavaScript(gridOptions, { indent: 1, inline: true } );
@@ -306,7 +309,7 @@ define([
  data: data
  });
 
- gridOptions.collection = isTree ? store.filter('mayHaveChildren') : store;
+ gridOptions.collection = isTree ? store.getRootCollection() : store;
  }
 
  self.demoGrid = new (declare(Array.prototype.slice.apply(arguments)))(gridOptions);
@@ -414,6 +417,9 @@ define([
  mockData[i].hasChildren = false;
  mockData[i].parent = i % 2;
  }
+ else {
+ mockData[i].parent = null;
+ }
 
  arrayUtil.forEach(fieldNames, function (fieldName) {
  mockData[i][fieldName] = fieldName + '_' + (i + 1);

doc/components/mixins/Tree.md

@@ -4,14 +4,16 @@ The Tree mixin enables expansion of rows to display children.
 
 ```js
 require([
- 'dojo/_base/declare',
  'dgrid/OnDemandGrid',
- 'dgrid/Keyboard',
- 'dgrid/Selection',
- 'dgrid/Tree'
-], function (declare, OnDemandGrid, Keyboard, Selection, Tree) {
- var treeGrid = new (declare([ OnDemandGrid, Keyboard, Selection, Tree ]))({
- collection: myStore,
+ 'dgrid/Tree',
+ 'dstore/Memory',
+ 'dstore/Tree'
+], function (OnDemandGrid, Tree, MemoryStore, TreeStoreMixin) {
+ var treeStore = new (MemoryStore.createSubclass([ TreeStoreMixin ]))({
+ data: [ /* ... */ ]
+ });
+ var treeGrid = new (OnDemandGrid.createSubclass([ Tree ]))({
+ collection: treeStore.getRootCollection(),
  columns: {
  // Render expando icon and trigger expansion from first column
  name: { label: 'Name', renderExpando: true },
@@ -38,8 +40,14 @@ The store may also (optionally) provide a `mayHaveChildren(object)` method which
 returns a boolean indicating whether or not the row can be expanded. If this
 is not provided, all items will be rendered with expand icons.
 
-The [`dstore/Tree`](https://github.com/SitePen/dstore/blob/master/docs/Stores.md#tree)
-module provides a reference implementation of these functions.
+The [`dstore/Tree`](https://github.com/SitePen/dstore/blob/master/docs/Stores.md#tree) module provides a reference
+implementation of these functions suitable for use with `dstore/Memory` and appropriately formatted data. `dstore/Tree`
+provides a convenience method `getRootCollection()` which simply filters the collection to only return the root nodes.
+It is necessary to pass a collection filtered to root nodes to the grid's `collection` option. To work correctly with
+`dstore/Tree` the data must include the following properties:
+
+* `hasChildren`: must be `false` for all leaf nodes, can be omitted for parent nodes in which case it defaults to `true`
+* `parent`: must be exactly `null` for root nodes, for nodes with parents it must specify the parent node's id
 
 ## Additional Column Definition Properties