3.0 beta 2

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 ?
Ozgur
April 18,
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.
pc
April 18,
*table i mean grid :-)
pc
April 18,
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>
Alex (ActiveWidgets)
April 18,
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
Ozgur
April 20,
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
November 17,
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
Paul Tiseo
November 17,
Hi Alex,
how to add skrolling your example ?
(But nine months have passed)...
John
March 29,
Hi John,

Check out /datagrid.18013/tree-grid.html
If you can live with the limitations, it might be useful to you.

Ankur
Ankur Motreja
March 30,
Hi Ankur,
does not solve my tasks
John
March 30,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.