When will the tree grid be ready ?

We purchased ActiveWidgets and it works for our simple needs, however we are in urgent need for a tree grid, ( grids can be expand into new grids when pressed + ).

I try to implement it myself, but there are numeoreus problems due to scrollbars, rendering, focusing.. I am not a javascript expert so decide to wait for a tree grid.

Is there a planned time for the release ?

well... im making mine, using GROUP functions, user select the column to GROUP and my grid change the selector to +, when user click a new table open like cellTemplate.

After finish the component ill post here.

*table i mean grid :-)

I cannot yet say for sure when the tree grid will be ready (somewhere in the next 6-9 months). I can share what I have so far - it requires fixing keyboard navigation, scrolling and sorting.

<style>
    .aw-grid-view .aw-grid-view {
        height: auto;
    }
</style>
<script>


AW.Tree.Grid = AW.Grid.Control.subclass();

AW.Tree.Grid.create = function(){

    var obj = this.prototype;

    obj.onGroupTemplateChanged = function(group){
        group.mapTemplate("content", "rows");
        group.mapTemplate("item", "row");
        group.mapModel("view", "row");
        return true;
    };

    obj.defineTemplate("group", new AW.Tree.Group);

    obj.onRowsTemplateChanged = function(rows){
        rows.mapTemplate("item", function(i){return this.$owner.getGroupTemplate(i)});
        rows.mapModel("view", "row");
        return true;
    };

    obj.setRowsTemplate(new AW.Grid.Rows);

    obj.setTemplate("cell", new AW.Tree.Item, 0);

    obj.getContentTemplate().mapTemplate("panel", function(i){
        switch(i){
            case 0: return this.getHeadersTemplate();
            case 1: return this.getGroupTemplate(0);
            case 2: return this.getFootersTemplate();
        }
    });


    obj.defineRowProperty("expanded", false);

    obj.getCellTemplate(0).mapModel("view", function(p){
        return this.$owner.getRowProperty(p, this.$1);
    });

    obj.onTreeSignClicked = function(src, i, j){
        var expanded = this.getRowExpanded(j);
        this.setRowExpanded(!expanded, j);
        this.getGroupTemplate(j).refresh();
    };

    obj.onScrollLeftChanged = function(x){
        var e1 = this.getGroupTemplate(0).element();
        if (e1) {e1.parentNode.scrollLeft = x}
    };

    obj._sortController = {};

    obj.setVirtualMode(false);
};

</script>

Using it is similar to the tree control.

<script>

    var tree = {
        0: [1, 2, 3, 4],
        1: [5, 6],
        2: [7],
        3: [8],
        4: [9]
    }


    var obj = new AW.Tree.Grid;

    obj.setCellText(function(col, row){return col + "." + row});
    obj.setHeaderText("header");

    obj.setColumnCount(10);

    obj.setRowCount(function(i){return tree[i] ? tree[i].length : 0});
    obj.setRowIndices(function(i){return tree[i]});

    document.write(obj);

</script>

Thanks Alex..

to:pc
Using GROUP functions, is a good idea. It will be very nice if we have a good example for that. waiting for your post

Hi Alex,

Any updates on TreeGrid control? Please let me know because I have to decide the feature for our next release.

Regards,
Divyananda M S

I have a different approach for the current grid with a fixed level number of 3. For those interested, here's the key part:

obj.onCellClicked = function(event, column, row) {
    if (column == 1) { // we clicked an expand/collapse
        // toggle myExpRows[row]
        myExpRows[row] = ( (myExpRows[row] == 1) ? 0 : 1);
        // move through rows and generate visible rows array
        row = 0;
        //var rows = "";
        arr = new Array();
        var showL1 = false;
        var showL2 = false;
        while( row <= myRowType.length ) {
            // if it is of row type = 0, show it
            if ( myRowType[row] == 0 )
                //rows = rows + "," + row;
                arr.push( row );
            if ( myRowType[row] == 1 && showL1 )
                //rows = rows + "," + row;
                arr.push( row );
            if ( myRowType[row] == 2 && showL2 )
                //rows = rows + "," + row;
                arr.push( row );
            // if the root is set to expanded, then show any first level nodes below it
            if ( myRowType[row] == 0 && myExpRows[row] == 1 )
                { showL1 = true; }
            if ( myRowType[row] == 0 && myExpRows[row] == 0 )
                { showL1 = false; showL2 = false; }
            if ( myRowType[row] == 1 && myExpRows[row] == 1 && showL1 )
                { showL2 = true; }
            if ( myRowType[row] == 1 && myExpRows[row] == 0 )
                { showL2 = false; }
                        
            row++;
        }
        //alert( arr.join() );
        if (arr.length > 0) {
            obj.setRowCount(arr.length);
            obj.setRowIndices(arr);
        }
        
    }
};

There are two key arrays that need to be defined: myExpRows[] and myRowType[]. At load, myExpRows[] has a value of zero for each row and myRowType[] has a 0,1 or 2 for each row that describes its nexting level.

The above code will always show 0-type rows since they are "root" rows. Also, clicking to expand/collapse is based on clicking in column 1, which in my use of this code, is a column that has a '+' icon that gets toggled to a '-' icon and back.

There is no ability of a separate "subgrid", which keeps things simple, but all subelements must have the same columns.

Hope this helps those searching.

- alphadog

Hi Alex,
how to add skrolling your example ?
(But nine months have passed)...

Hi John,

Check out http://www.activewidgets.com/javascript.forum.18013.3/tree-grid.html
If you can live with the limitations, it might be useful to you.

Ankur

Hi Ankur,
does not solve my tasks