Skip to content

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

@Hesesses

Description

@Hesesses

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions