ejTreeGrid is not rendered

[mujef]

Hi,

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

[Jayakumar Duraisamy]

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, 

@Component({  

selector: 'ej-app', templateUrl: 'app/components/treegrid/treegrid.component.html',  

styleUrls: ['app/components/treegrid/treegrid.component.css'], }) 

[treegrid.component.css] 

ej-treegrid { 

    display: block; 

} 

 

We have also prepared a sample for your reference, please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_Ang2-1804837283.zip 

Please let us know if you require further assistance on this. 

Regards, 

Jayakumar D 

[Agne]

Hello,

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

[Jayakumar Duraisamy]

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   

[html] 

<ej-splitter #hcsplitter id="HCSplitter" height="400" width="100%" (create)="splitterCreate($event)" (resize)="splitterResize($event)"> 

//… 

[TS] 

splitterCreate = function (args) { 

        var treeObj = $("#TreeGridControl").ejTreeGrid("instance"); 

        treeObj._windowResize(); 

    } 

    splitterResize = function (args) { 

        var treeObj = $("#TreeGridControl").ejTreeGrid("instance"); 

        treeObj._windowResize(); 

 

    } 

We have also prepared a sample for your reference, please find sample location. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_Ang2__ManualResize1177268692.zip  

Please let us know if you require further assistance on this. 

Regards, 

Jayakumar D 

[Aswath]

Hi,

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.

Thanks,

Aswath

[Jayakumar Duraisamy]

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;
treeObj.expandAtLevel(id);
} 

We have prepared a sample for your reference. Please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_ExpandLevel1903111684 

Please let us know, if you require any other assistance on this. 

Regards, 

Jayakumar D