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="paneDiv"></div>
</body>

CSS

#grid {
        height: 500px;
        font-size: 1.2em;
    }

JavaScript

dojo.require("dojox.grid.TreeGrid");

    dojo.require("dijit.TitlePane");

    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dijit.tree.ForestStoreModel");
    //dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
    dojo.require("dijit.form.Select");

    dojo.require("dojox.grid.cells.dijit")

dojo.ready(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;

           ...