khan4019 / tree-grid-directive

Need one or more maintainer for this! comment or email me if you are interested
http://khan4019.github.io/tree-grid-directive/test/treeGrid.html
347 stars 183 forks source link

expand-level not working when tree-data loaded dynamically #84

Closed Hesesses closed 8 years ago

Hesesses commented 8 years ago

html:

<tree-grid tree-data="settings.documentsTreeDdata" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-select="my_tree_handler(branch)" expand-level="5" icon-leaf= "glyphicon glyphicon-globe"></tree-grid>

JS:

function initTreeView() {

        var tree;

        var rawTreeData = [
            {"DemographicId":1,"ParentId":0,"Name":"United States of America","Description":"United States of America", "Area":9826675,"Population":318212000,"TimeZone":"UTC -5 to -10"},
            {"DemographicId":2,"ParentId":1,"Name":"California","Description":"The Tech State","Area":423970,"Population":38340000,"TimeZone":"Pacific Time"},
            {"DemographicId":3,"ParentId":2,"Name":"San Francisco","Description":"The happening city","Area":231,"Population":837442,"TimeZone":"PST"},
            {"DemographicId":4,"ParentId":2,"Name":"Los Angeles","Description":"Disco city","Area":503,"Population":3904657,"TimeZone":"PST"},
            {"DemographicId":5,"ParentId":1,"Name":"Illinois","Description":"Not so cool","Area":57914,"Population":12882135,"TimeZone":"Central Time Zone"},
            {"DemographicId":6,"ParentId":5,"Name":"Chicago","Description":"Financial City","Area":234,"Population":2695598,"TimeZone":"CST"},
            {"DemographicId":7,"ParentId":1,"Name":"Texas","Description":"Rances, Oil & Gas","Area":268581,"Population":26448193,"TimeZone":"Mountain"},
            {"DemographicId":8,"ParentId":1,"Name":"New York","Description":"The largest diverse city","Area":141300,"Population":19651127,"TimeZone":"Eastern Time Zone"},
            {"DemographicId":14,"ParentId":8,"Name":"Manhattan","Description":"Time Square is the place","Area":269.403,"Population":0,"TimeZone":"EST"},
            {"DemographicId":15,"ParentId":14,"Name":"Manhattan City","Description":"Manhattan island","Area":33.77,"Population":0,"TimeZone":"EST"},
            {"DemographicId":16,"ParentId":14,"Name":"Time Square","Description":"Time Square for new year","Area":269.40,"Population":0,"TimeZone":"EST"},
            {"DemographicId":17,"ParentId":8,"Name":"Niagra water fall","Description":"Close to Canada","Area":65.7,"Population":0,"TimeZone":"EST"},
            {"DemographicId":18,"ParentId":8,"Name":"Long Island","Description":"Harbour to Atlantic","Area":362.9,"Population":0,"TimeZone":"EST"},
            {"DemographicId":51,"ParentId":1,"Name":"All_Other","Description":"All_Other demographics","Area":0,"Population":0,"TimeZone":0},
            {"DemographicId":201,"ParentId":0,"Name":"India","Description":"Hydrabad tech city", "Area":9826675,"Population":318212000,"TimeZone":"IST"},
            {"DemographicId":301,"ParentId":0,"Name":"Bangladesh","Description":"Country of love", "Area":9826675,"Population":318212000,"TimeZone":"BST"}
        ];

        var myTreeData = getTree(rawTreeData, 'DemographicId', 'ParentId');

        $scope.settings.documentsTreeData = myTreeData;    
        $scope.my_tree = tree = {};
        $scope.expanding_property = "Name";
        $scope.col_defs.length = 0;
        var columns = [
            { field: "Description"},
            { field: "Area"},
            { field: "Population"},
            { field: "TimeZone", displayName: "Time Zone"}
        ];

        for ( var x = 0; x < columns.length; x ++ ) {
            $scope.col_defs.push(columns[x]);
        }

        $scope.my_tree_handler = function(branch){
            console.log('you clicked on', branch)
        };
    }

    function getTree(data, primaryIdName, parentIdName){
        if(!data || data.length==0 || !primaryIdName ||!parentIdName)
            return [];

        var tree = [],
            rootIds = [],
            item = data[0],
            primaryKey = item[primaryIdName],
            treeObjs = {},
            parentId,
            parent,
            len = data.length,
            i = 0;

        while(i<len){
            item = data[i++];
            primaryKey = item[primaryIdName];           
            treeObjs[primaryKey] = item;
            parentId = item[parentIdName];

            if(parentId){
                parent = treeObjs[parentId];    

                if(parent.children){
                    parent.children.push(item);
                }
                else{
                    parent.children = [item];
                }
            }
            else{
                rootIds.push(primaryKey);
            }
        }

        for (var i = 0; i < rootIds.length; i++) {
            tree.push(treeObjs[rootIds[i]]);
        };

        return tree;
    }

$scope.col_defs = [];

And later call

initTreeView()

tree-grid only displays the three elements (United States of America, India, Bangladesh) not expanded

melozzo commented 8 years ago

this is a show stopper for the application I am working on

esinek commented 8 years ago

I haven't done a lot of work on this, so YMMV, but this seemed to work in my initial tests.

In the function _add_branch_tolist, look for this statement: _return b.expanded = b.level < expandlevel; and replace with this _return b.expanded = b.level <= expandlevel;

Let me know if that works for you (or submit the PR yourself :-))

TrueDub commented 8 years ago

Are you sure you're looking at the latest version of the directive? That line doesn't appear in that function.

TrueDub commented 8 years ago

I have a solution for this issue, but it has a caveat - you can never collapse the tree to less than the expand-level. I'm not sure this will meet the need here, so all comments welcome, before I submit a pull request.

TrueDub commented 8 years ago

The fix for this is in release 0.4.0 of this directive - closing now.