dgrid + dstore + Tree + Selector

An OnDemandGrid with Tree and Selector plugins for both grid and store.

by Thomas Upton

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css">
<div id="widget"></div>

Babel + JSX

require({
    packages: [{
        name: 'dgrid',
        location: 'https://rawgit.com/SitePen/dgrid/v1.1.0',
    },
    {
        name: 'dstore',
        location: 'https://rawgit.com/SitePen/dstore/v1.1.1'
    }]
}, [
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dstore/Memory',
    'dojo/dom',
    'dgrid/Tree',
    'dstore/Tree',
    'dgrid/Selector',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dojo/domReady!'
], function(declare, Grid, Memory, dom, Tree, TreeStore, Selector, _WidgetBase, _TemplatedMixin) {
const LONG_TEXT = 'some longer text I guess';

const MyStore = declare([Memory, TreeStore]);

const MyGrid = declare([Grid, Tree, Selector]);

const MyWidget = declare([_WidgetBase, _TemplatedMixin], {
	templateString: '<div><div data-dojo-attach-point="gridNode"></div></div>',
  
  postCreate() {
  	this._store = new MyStore({data: []});
    this._grid = this._createGrid(this._store);
    
    this.gridNode.appendChild(this._grid.domNode);
    
    this.own(this._store, this._grid);
  },
  
  startup() {
    this.inherited(arguments);
    this._grid.startup();
  },

	_createGrid(store) {
    let grid = new MyGrid({
      collection: store.getRootCollection(),
      sort: 'b',
      selectionMode: 'none',
      allowSelectAll: true,
      columns: [
      	{selector: 'checkbox'},
        {field: 'a', sortable: true, renderExpando: true},
        {field: 'b', sortable: true},
        {field: 'c', sortable: true, label: 'c-a-longer-label'}
      ]
    });
    return grid;
  },
  
  
	populate() {
    let data = [{
      id: '__ok',
      parent: null,
      hasChildren: true,
      a: 999,
      b: 999,
      c: 999
    }];

    for (let i = 0; i < 10; i++) {
      data.push({
        id: i,
        a: i,
        b: i * 10,
        c: LONG_TEXT,
        parent: '__ok',
        hasChildren: false
      });
    }

    this._store.setData(data);
    this._grid.set('collection', this._store.getRootCollection());
  }
});

for (let i = 0;...