We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejTreeGrid is not rendered


ej-treegrid is not rendered correctly on the page:
- is is not visible until you resize your browser window
- when it finally appears its content (e-gridcontent) has height set to 0px in element style attribute

Steps to reproduce this issue:
1. create an application as described on On March 8, 2017 01:37 AM in https://www.syncfusion.com/forums/127630/how-to-work-with-angular-cli
2. add ej-treegrid to app.component as described here: https://help.syncfusion.com/angular-2/treegrid/getting-started#syncfusion-javascript-components-source-configuration-and-sample-creation
3. change property name in app.component.ts from "treegridData" to "treeGridData"
4. run ng serve --aot false

5 Replies

JD Jayakumar Duraisamy Syncfusion Team April 25, 2017 05:06 PM UTC

Hi Mujef, 
We regret for the inconvenience caused. 
In Angular 2 Treegrid samples, we have to set the CSS property of display as block for ej-treegrid element. As we are referred in the CSS files but missed to include the code snippet in the online documentation. We will update and refresh the getting-started document ASAP. 
Please refer the following code snippet, 
selector: 'ej-app', templateUrl: 'app/components/treegrid/treegrid.component.html',  
styleUrls: ['app/components/treegrid/treegrid.component.css'], }) 
ej-treegrid { 
    display: block; 
We have also prepared a sample for your reference, please find the sample location as below, 
Please let us know if you require further assistance on this. 
Jayakumar D 

AG Agne May 4, 2017 07:39 AM UTC


I am handling almost the same problem. I am trying to solve it with your example, but not everything is working.

1. When I set TreeGrid height to 100% (or some other "%" value), TreeGrid normally appears only after resizeing browser window (with height="100px" or some other "px" value the data load correctly without resizeing browser window).

2. I want to add this TreeGrid in Splitter panel, but there is also some problems with correctly loading data. The TreeGrid also correctly loads by sizeSettings only after resizeing browser window:

Ex. 1. Before resize

Ex. 2. After resize (height resize)

Also I am attaching my sample.

Attachment: TreeGrid_Ang2_2b73f072.zip

JD Jayakumar Duraisamy Syncfusion Team May 5, 2017 05:02 PM UTC

Hi Agne, 
Thanks for contacting Syncfusion support. 
When resize the browser window TreeGrid automatically update its height/width depends on it container dimension but if we are dynamically change the DOM element dimension then we have to manually refresh the TreeGrid by using _windowResize method. To overcome the reported issue at load time, we must refresh the treegrid at the end of create and resize of Splitter events. 
Please refer following code snippet   
<ej-splitter #hcsplitter id="HCSplitter" height="400" width="100%" (create)="splitterCreate($event)" (resize)="splitterResize($event)"> 
splitterCreate = function (args) { 
        var treeObj = $("#TreeGridControl").ejTreeGrid("instance"); 
    splitterResize = function (args) { 
        var treeObj = $("#TreeGridControl").ejTreeGrid("instance"); 
We have also prepared a sample for your reference, please find sample location. 
Please let us know if you require further assistance on this. 
Jayakumar D 

AS Aswath September 1, 2017 01:45 PM UTC


Please explain how to take TreeGrid Reference in ts file. Here you have used Jquery. Can't we use Angular way to get it done?

I need to trigger expandAtLevel() method of Angular2 TreeGrid. Please give a sample or code snippet to achieve that.



JD Jayakumar Duraisamy Syncfusion Team September 4, 2017 06:13 PM UTC

Hi Aswath, 
We can get the instance of TreeGrid control by using @ViewChild in the app.Component.ts file. From the Treegrid instance, we can use the expandAtLevel public method to expand the required level of parent records. 
Please refer following code snippet, 
import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 
    import {CommonModule} from "@angular/common"; 
    import { EJComponents} from 'ej-angular2'; 
export class AppComponent { 
  public constructor(){} 
@ViewChild('TreeGridControl') treegrid : EJComponents<any, any>; 
expandData(id: number) {
var treeObj = this.treegrid.widget;
We have prepared a sample for your reference. Please find the sample location as below, 
Please let us know, if you require any other assistance on this. 
Jayakumar D 

Live Chat Icon For mobile
Up arrow icon