:: Forum >> Version 2 >>

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 -
http://www.activewidgets.com/site/?app=forum&cmd=search&section=v2&query=Tree+Grid
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.

Regards,
Girish
Girish Khemani, Fidelity
Wednesday, January 10, 2007
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)
Wednesday, January 10, 2007
Hi,

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.

Regards,
Girish
Girish Khemani, Fidelity
Wednesday, January 10, 2007
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 /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>

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

        var 
rowIndices = new Array();

        for (var 
0tree["root"].lengthi++) {

            
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(0tree["root"][i]) == "symbol-minus") {
                
rowIndices rowIndices.concat(treetree["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": [0467],
        
0: [123],
        
4: [5],
        
6: [],
        
7: [89]
    }

    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 
0tree["root"].lengthi++) {
            if (
treetree["root"][i] ].length != 0) {
                
obj.setCellImage("symbol-plus"0tree["root"][i]);
            } else {
                
obj.setCellImage("symbol-leaf"0tree["root"][i]);
            }
        }

        
setupTree();

    
obj.onCellClicked = function(eventcolumnrow){

        
// 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;
            else
                
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(columnrow) == "symbol-plus") {
                    
obj.setCellImage("symbol-minus"columnrow)
                    
setupTree();
                } else if (
obj.getCellImage(columnrow) == "symbol-minus") {
                    
obj.setCellImage("symbol-plus"columnrow);
                    
setupTree();
                }

            }
        }

    }

    
document.write(obj);

</
script

</
body>
</
html>
 
Ankur Motreja
Thursday, January 11, 2007



This topic is archived.

Back to support forum

Forum search