dgrid JSFiddle Template

A default JSFiddle with the standard Dojo and dgrid options

by schlomm

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">
<div>
  <div id="onDemandGridContainer" />
</div>
<div id="selectionGridContainer" />

CSS

.foo {
  /* add custom css */
}

JavaScript

require({
  packages: [{
    name: 'dgrid',
    location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
  }, {
    name: 'xstyle',
    location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
  }, {
    name: 'put-selector',
    location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
  }]
}, [
  'dojo/_base/declare',
  'dojo/on',
  'dojo/dom-construct',
  'dgrid/OnDemandGrid',
  'dgrid/Selection',
  "dgrid/Keyboard",
  "dgrid/Selection",
  "dgrid/extensions/ColumnResizer",
  "dgrid/editor",
  "dgrid/extensions/DijitRegistry",
  'dojo/store/Memory',
  'dojo/domReady!'
], function(declare, on, domConstruct, OnDemandGrid, SelectionGrid, Keyboard, Selection, ColumnResizer, Editor, DijitRegistry, Memory) {
  var data = [{
    id: 1,
    name: 'Peter'
  }, {
    id: 2,
    name: 'Paul'
  }, {
    id: 3,
    name: 'Mary'
  }];
  var store = new Memory({
    data: data
  });
  var options = {
    columns: [{
      field: 'id',
      label: 'ID'
    }, {
      field: 'name',
      label: 'Name'
    }],
    store: store
  };

  var myOndemandGrid = new OnDemandGrid({
    columns: [{
      field: 'id',
      label: 'ID'
    }, {
      field: 'name',
      label: 'Name'
    }],
    store: store
  }, 'onDemandGridContainer');


  var selectionGrid = declare([OnDemandGrid, Keyboard, Selection, ColumnResizer, DijitRegistry, Editor]);
  var mySelectionGrid = new selectionGrid({
    columns: [{
      field: 'id',
      label: 'ID'
    }, {
      field: 'name',
      label: 'Name'
    }, {
      editor: 'checkbox',
      label: ' ',
      autoSave: true,
      sortable: false,
      renderCell: function(object, value, node) {
        var attrs = {
          type: "checkbox",
          name: "selected",
          tabIndex: -1,
          disabled: false,
          "class": "dgrid-input"
        };
        domConstruct.create("input", attrs, node);
      }
    }],
		cellNavigation: false,
    store: store
  }, 'selectionGridContainer');
  
  
  mySelectionGrid.on("dgrid-select", function...