Hi Girish,
I had tried the same thing some time back, but it was quite complex and time consuming.
So, I finally settled for the code below which is based a bit on Paul Tiseo's approach at
http://www.activewidgets.com/javascript.forum.13475.4/when-will-the-tree-grid.html.
Scrolling and keyboard navigation works.
However, sorting doesn't work and with the code I have written so far allows only a 2-level tree.
Further, there is a small flicker when the + or - buttons of the tree are pressed.
If all this is not a problem, you might find the code useful :)
I use it since my application sorts on the server side and needs no more than a 2-level tree.
With some modifications, it should be possible to extend it to more than a 2-level tree.
BTW, make sure you change the path in the style section too if your AW libraries are at a different location or the + and - images won't show up.
Regards,
Ankur
<html>
<head>
<script type="text/javascript" src="activewidgets/runtime/lib/aw.js"></script>
<link href="activewidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<style>
.aw-image-symbol-minus {
background:url(activewidgets/runtime/styles/xp/tree.png) -84px 50%;
}
.aw-image-symbol-plus {
background:url(activewidgets/runtime/styles/xp/tree.png) -44px 50%;
}
.aw-image-symbol-leaf {
background:url(activewidgets/runtime/styles/xp/tree.png) -124px 50%;
}
</style>
</head>
<body>
<script>
function setupTree() {
var rowIndices = new Array();
for (var i = 0; i < tree["root"].length; i++) {
rowIndices[rowIndices.length] = tree["root"][i];
if (obj.getCellImage(0, tree["root"][i]) == "symbol-minus") {
rowIndices = rowIndices.concat(tree[ tree["root"][i] ]);
}
}
obj.setRowCount(rowIndices.length);
obj.setRowIndices(rowIndices);
}
var myData = [
["1","1", "1", "a", "a", "a"],
["","2", "2", "b", "b", "b"],
["","3", "3", "c", "c", "c"],
["","4", "4", "d", "d", "d"],
["2","1", "5", "e", "e", "e"],
["","2", "6", "f", "f", "f"],
["3","1", "7", "g", "g", "g"],
["4","1", "8", "h", "h", "h"],
["","2", "9", "i", "i", "i"],
["","3", "10", "j", "j", "j"]
];
var myColumns = [
"key", "item1", "item2", "item3", "item4", "item5"
];
var tree = {
"root": [0, 4, 6, 7],
0: [1, 2, 3],
4: [5],
6: [],
7: [8, 9]
}
var obj = new AW.Grid.Extended;
obj.setId("myGrid");
obj.setCellTemplate(new AW.Templates.ImageText);
obj.setFixedLeft(0);
obj.setCellText(myData);
obj.setHeaderText(myColumns);
obj.setRowCount(myData.length);
obj.setColumnCount(myColumns.length);
for (var i = 0; i < tree["root"].length; i++) {
if (tree[ tree["root"][i] ].length != 0) {
obj.setCellImage("symbol-plus", 0, tree["root"][i]);
} else {
obj.setCellImage("symbol-leaf", 0, tree["root"][i]);
}
}
setupTree();
obj.onCellClicked = function(event, column, row){
if (column == 0) {
var targetID = "";
if (event.target)
targetID = event.target.id;
else
targetID = event.srcElement.id;
if (targetID === "myGrid-cell-" + column + "-" + row + "-box-image") {
if (obj.getCellImage(column, row) == "symbol-plus") {
obj.setCellImage("symbol-minus", column, row)
setupTree();
} else if (obj.getCellImage(column, row) == "symbol-minus") {
obj.setCellImage("symbol-plus", column, row);
setupTree();
}
}
}
}
document.write(obj);
</script>
</body>
</html>