Tree Grid

Hi Alex,

We purchased multiple licenses of AW and its working out fine for us.

There are certain screens where we need Tree Grid and Grid in a Grid kind of functionality, there its getting challenging for us.

Tree Grid -
I tried the sample code that you provided at -
As you mentioned in this thread, vertical scroll is not working/appearing for us. Can you provide a sample code where you have fixed it or give me some pointers for fixing this.

When are you planning to release Tree Grid.

Can you share when is the next release of AW grid due and what will be the key new features in that release.

Girish Khemani, Fidelity
January 10,
Sorry, I cannot say yet when the tree grid will be released. I am currently working on the bug fix release (2.0.2) and after that there will be a Safari/Opera version ('professional edition').
Alex (ActiveWidgets)
January 10,

If there is something which can easily fix the scroll problems in above mentioned code, please suggest those to me; I will give it a try.

Girish Khemani, Fidelity
January 10,
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.


    <script type="text/javascript" src="activewidgets/runtime/lib/aw.js"></script>
    <link href="activewidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
.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%;


    // decides which rows are to be displayed based on the images (+ or -) in column 0
    function setupTree() {

        var rowIndices = new Array();

        for (var i = 0; i < tree["root"].length; i++) {

            rowIndices[rowIndices.length] = tree["root"][i];

            // if image in column 0 is symbol-minus, node should be open and should display the children
            if (obj.getCellImage(0, tree["root"][i]) == "symbol-minus") {
                rowIndices = rowIndices.concat(tree[ tree["root"][i] ]);



    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.setCellTemplate(new AW.Templates.ImageText); 




        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]);


    obj.onCellClicked = function(event, column, row){

        // we are checking only for clicks on column 0 which has the + or - image
        if (column == 0) {

            var targetID = "";

            if (event.target)
                targetID = event.target.id;
                targetID = event.srcElement.id;

            // check if the cell image was clicked
            if (targetID === "myGrid-cell-" + column + "-" + row + "-box-image") {

                // toggle the image and call setupTree
                if (obj.getCellImage(column, row) == "symbol-plus") {
                    obj.setCellImage("symbol-minus", column, row)
                } else if (obj.getCellImage(column, row) == "symbol-minus") {
                    obj.setCellImage("symbol-plus", column, row);





Ankur Motreja
January 11,

This topic is archived.

See also:

Back to support forum