dojox.grid.TreeGrid

by keemor

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<body class="claro">
  <div id="gridDiv"></div>
</body>

CSS

#grid {
   height: 500px;
 }

JavaScript

dojo.require("dojox.grid.TreeGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");

dojo.addOnLoad(function() {
  var data = {
    identifier: 'id',
    label: 'label',
    items: []
  };
  var data_list = [{
      col2: false,
      label: 'First not editable value',
      col4: 'new',
      col5: 1.1,
      children: [{
        label: 'Test1',
        col2: false,
        col4: 'new',
        col5: 1.1
      }, {
        label: 'Test2',
        col2: true,
        col4: 'new',
        col5: 1.1
      }]
    }, {
      col2: true,
      label: 'Second not editable value',
      col4: 'ready',
      col5: 1.2,
      children: [{
        label: 'Test3',
        col2: false,
        col4: 'new',
        col5: 1.1
      }, {
        label: 'Test4',
        col2: true,
        col4: 'new',
        col5: 1.1
      }]

    }, {
      col2: false,
      label: 'Third not editable value',
      col4: 'replied',
      col5: 1.3,
      children: [{
        label: 'Test5',
        col2: false,
        col4: 'new',
        col5: 1.1
      }, {
        label: 'Test6',
        col2: true,
        col4: 'new',
        col5: 1.1
      }]
    }

  ];
  var rows = 20;
  for (var i = 0, length = data_list.length; i < rows; i++) {
    var idLevel0 = String(i + 1);
    var row = data_list[i % length];
    row.children = row.children.map(function(child, idx) {
      var newChildId = '_' + idLevel0 + String(idx);
      var newChild = dojo.clone(child);
      newChild.id = newChildId;
      return newChild;
    });

    var newItem = dojo.clone(row);
    newItem.id = idLevel0;

    data.items.push(newItem);
  }
  var store = new dojo.data.ItemFileWriteStore({
    data: data
  });

  var model = new dijit.tree.ForestStoreModel({
    store: store,
    childrenAttrs: ['children']
  });

  /*set up layout*/
  var layout = [{
      'name': 'Id',
      'field': 'id',
      'width': '100px'
    }, {
      'name': 'Column 2',
      'field': 'col2',
 ...