Dojo Dropdownbutton example

by schlomm

HTML

<link rel="stylesheet" href="https://rawgit.com/dojo/dijit/master/themes/claro/claro.css">
<div id="dropDownButtonContainer"></div>

<div>
  <div id="onDemandGridContainer" />
</div>
<div>
  <div id="selectionGridContainer" />
</div>

CSS

.foo {
  /* add custom css */
}

JavaScript

require(
// Add required extensions fpr dgrid
{
  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'
  }]
}, 
// Add dojo modules AMD-style
[
  '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",
  "dijit/TooltipDialog",
  "dijit/form/TextBox",
  "dijit/form/Button",
  "dijit/form/DropDownButton",
  "dojo/dom",
  "dojo/domReady!"
], function(declare, on, domConstruct, OnDemandGrid, SelectionGrid, Keyboard, Selection, ColumnResizer, Editor, DijitRegistry, Memory, TooltipDialog, TextBox, Button, DropDownButton, dom) {

  var myDialog = new TooltipDialog({
    content: '<label for="name">Name:</label> <input data-dojo-type="dijit/form/TextBox" id="name" name="name"><br>' +
      '<label for="hobby">Hobby:</label> <input data-dojo-type="dijit/form/TextBox" id="hobby" name="hobby"><br>' +
      '<button data-dojo-type="dijit/form/Button" type="submit">Save</button>'
  });

  // working dropdownbutton version:
  var myButton = new DropDownButton({
    label: "show tooltip dialog",
    dropDown: myDialog
  });
  dom.byId("dropDownButtonContainer").appendChild(myButton.domNode);
  myButton.startup();


/////////////////////////////// DGRID Part


  // Sample Data
  var data = [{
    id: 1,
    name: 'Peter',
    surname: 'Williams'
  }, {
    id: 2,
    name: 'Paul',
    surname: 'McAllen'
  }, {
    id: 3,
    name: 'Mary',
    surname: 'Bright'
  }];

  //Create store from data  
  var store = new Memory({
    data: data
  });


  //Create sample very simple samplegrid  
  var myOndemandGrid = new OnDemandGrid({
    columns: [{
      field: 'id',
      label:...