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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejTreeGrid is not rendered

Thread ID:

Created:

Updated:

Platform:

Replies:

130137 Apr 24,2017 02:59 PM UTC Sep 4,2017 06:13 PM UTC Angular 5
loading
Tags: ejTreeGrid
mujef
Asked On April 24, 2017 02:59 PM UTC

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 [Syncfusion]
Replied On 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, 
@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, 
Please let us know if you require further assistance on this. 
Regards, 
Jayakumar D 


Agne
Replied On May 4, 2017 07:39 AM UTC

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 [Syncfusion]
Replied On 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   
[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. 
Please let us know if you require further assistance on this. 
Regards, 
Jayakumar D 


Aswath
Replied On September 1, 2017 01:45 PM UTC

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 [Syncfusion]
Replied On 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;
treeObj.expandAtLevel(id);
} 
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. 
Regards, 
Jayakumar D 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;