{"action":"opened","issue":{"url":"https://api.github.com/repos/primefaces/primeng/issues/5813","repository_url":"https://api.github.com/repos/primefaces/primeng","labels_url":"https://api.github.com/repos/primefaces/primeng/issues/5813/labels{/name}","comments_url":"https://api.github.com/repos/primefaces/primeng/issues/5813/comments","events_url":"https://api.github.com/repos/primefaces/primeng/issues/5813/events","html_url":"https://github.com/primefaces/primeng/issues/5813","id":327246815,"number":5813,"title":"Selection not working in Organization Chart","user":{"login":"viveknuna","id":3524495,"avatar_url":"https://avatars1.githubusercontent.com/u/3524495?v=4","gravatar_id":"","url":"https://api.github.com/users/viveknuna","html_url":"https://github.com/viveknuna","followers_url":"https://api.github.com/users/viveknuna/followers","following_url":"https://api.github.com/users/viveknuna/following{/other_user}","gists_url":"https://api.github.com/users/viveknuna/gists{/gist_id}","starred_url":"https://api.github.com/users/viveknuna/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/viveknuna/subscriptions","organizations_url":"https://api.github.com/users/viveknuna/orgs","repos_url":"https://api.github.com/users/viveknuna/repos","events_url":"https://api.github.com/users/viveknuna/events{/privacy}","received_events_url":"https://api.github.com/users/viveknuna/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-29T09:48:45Z","updated_at":"2018-05-29T09:48:45Z","closed_at":null,"author_association":"NONE","body":"I have a hyperlink, I open Modal on click of this click. It works fine. I'm using PrimeNG organization chart and assign the value to this organization chart by using [value]=\"data1\". I want to preselect a node when this modal renders to the end user. So I use [(selection)]=\"data1[0].children[0]\". But it gives the below error, but when I check data1 in the console and in debugger mode its show data. Is there any way to set data1 before modal loads. Or any other workaround?\r\n\r\n> cannot read property children of undefined\r\n\r\nSo I think it's not getting data at the time of DOM loading. But again for the same reason [value]=\"data1\" should also not work.\r\n\r\n**First Page HTML**\r\n\r\n```\r\n<div class=\"row clearfix\" [@routerTransition]>\r\n    <div class=\"ui-grid-row\"><a href=\"javascript:showcategorychart.show(record.id)\">{{record.categoryName}}</a></div>\r\n    <show-category-chart-modal #showcategorychart [categoryId]=\"categoryId\"></show-category-chart-modal>\r\n</div>\r\n```\r\n**First Page Typescript**\r\n\r\n```\r\n@ViewChild('showcategorychart') showcategorychart: CategoryChartData;\r\n\r\nshowCategoryChart(row): void {\r\n    this.categoryId = row.id;\r\n    this.showcategorychart.show();\r\n};\r\n```\r\n**Modal HTML**\r\n\r\n```\r\n<div bsModal #showcategorychart=\"bs-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"showcategorychart\" aria-hidden=\"true\" [config]=\"{backdrop: 'dynamic'}\">\r\n    <div class=\"modal-dialog modal-lg\">\r\n        <div #modalContent class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"close\" (click)=\"close()\">&times;</button>\r\n                <h4 class=\"modal-title\">Category Hierarchy</h4>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"content-section implementation\">\r\n                    <p-organizationChart [value]=\"data1\" selectionMode=\"single\" [(selection)]=\"selectedNode\" (onNodeSelect)=\"onNodeSelect($event)\"\r\n                                         styleClass=\"company\">\r\n                        <ng-template let-node pTemplate=\"person\">\r\n                            <div class=\"node-header ui-corner-top\">{{node.label}}</div>\r\n                            <div class=\"node-content\">\r\n                                <img src=\"{{node.data.avatar}}\" width=\"32\">\r\n                                <div>{{node.data.name}}</div>\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template let-node pTemplate=\"department\">\r\n                            {{node.label}}\r\n                        </ng-template>\r\n                    </p-organizationChart>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n```\r\n**Modal Typescript**\r\n\r\n```\r\n@Component({\r\n    selector: 'show-category-chart-modal',\r\n    templateUrl: './categorydetails.html',\r\n})\r\n//@Directive({ selector: '[formGroupName]', providers: [formGroupNameProvider] })\r\nexport class CategoryChartData extends AppComponentBase implements OnInit {\r\n    data1: TreeNode[] = [];\r\n    selectedNode: TreeNode;\r\n    formGroup: any;\r\n    @Input() parent;\r\n    @ViewChild('showcategorychart') modal: ModalDirective;\r\n    @ViewChild('modalContent') modalContent: ElementRef;\r\n    @Input() categoryId: number;\r\n    @Input() category: CategoryDto;\r\n    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();\r\n    active: boolean = false;\r\n    public categoryTemplate: TemplatesTypes[];\r\n    public CategoryList: CategoryDto[] = [];\r\n    form: FormGroup;\r\n    name: string;\r\n\r\n    constructor(\r\n        injector: Injector,\r\n        private route: ActivatedRoute,\r\n        private router: Router,\r\n        private _categoryservice: CategoryServiceProxy,\r\n        private _tokenService: TokenService,\r\n        private fb: FormBuilder,\r\n        private cd: ChangeDetectorRef\r\n    ) {\r\n        super(injector);\r\n    }\r\n\r\n    ngOnInit(): void {\r\n    }\r\n\r\n    onSelectCategoryTemplate(templatesTypesId) {\r\n        var count = 0;\r\n        for (var i = 0; i < this.categoryTemplate.length; i++) {\r\n            if (this.categoryTemplate[i].id == templatesTypesId) {\r\n            }\r\n        }\r\n        this.CategoryList = [];\r\n        for (var j = 0; j < count; j++) {\r\n            this.CategoryList.push(this.category);\r\n        }\r\n    }\r\n\r\n    show(categoryid?: number): void {\r\n        this.data1 = [];\r\n        this.categoryId = categoryid;\r\n        this.loadAll();\r\n        this.modal.show();\r\n    }\r\n\r\n    close(): void {\r\n        this.active = false;\r\n        this.modal.hide();\r\n    }\r\n\r\n    loadAll() {\r\n        this._categoryservice.getCategoryChartDataByCategoryID(this.categoryId).subscribe(\r\n            (res) => {\r\n                this.categoriestoTreeNodes(res);\r\n                this.selectedNode = this.data1[0].children[0];\r\n                console.log(this.selectedNode);\r\n            }\r\n        );\r\n    }\r\n\r\n    private categoriestoTreeNodes(categories: CategoryChartDto) {\r\n        this.data1.push(this.categoriestoTreeNode(categories));\r\n    }\r\n\r\n    private categoriestoTreeNode(cont: CategoryChartDto): TreeNode {\r\n        return {\r\n            label: cont.label,\r\n            type: cont.type,\r\n            styleClass: cont.styleClass,\r\n            expanded: cont.expanded,\r\n            data: cont.data,\r\n            children: cont.children,\r\n            selectable: cont.selectable,\r\n            parent: cont.selectedCategory\r\n        };\r\n    }\r\n}\r\n```\r\n\r\n**PrimeNG Version:** 5.2.4"}}
{"actor":{"display_login":"viveknuna"}}