FlexGird not rendering until resize

FlexGird not rendering until resize

Posted by: jason.brandt on 12 November 2018, 9:00 am EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 November 2018, 9:00 am EST

  I am using a flex grid with tree format. It will not render the grid until a resize is done. Additionally, it will ‘remove’ the grid if the html element containing the grid is hidden; then it won’t render the grid again until resize.

  the grid

  <div style="height:800px;width:1000px;">
  	<wj-flex-grid class="custom-flex-grid"
  				  [itemsSource]="hierarchyData"
  				  [childItemsPath]="'items'"				  
  				  [selectionMode]="'ListBox'"
  				  [headersVisibility]="'Column'">
  		<wj-flex-grid-column [binding]="'name'" [width]="'*'"></wj-flex-grid-column>
  		<wj-flex-grid-column [binding]="'length'" [width]="80" [align]="'center'"></wj-flex-grid-column>
  	</wj-flex-grid>
  </div>
  

  The data for grid

  this.repository.getDataByVals("api/EntityManagement/Hierarchy", searchVals).subscribe(response => {
  			this.hierarchyData = new wjcCore.CollectionView(response);
  		});
  

  Note:
  
  I cannot reproduce this is jsfiddle or stackblitz

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 11:07 am EST

  I have tried

  this.repository.getDataByVals("api/EntityManagement/Hierarchy", searchVals).subscribe(response => {
  			
  			this.hierarchyData = new wjcCore.CollectionView(response);
  			this.hierarchygrid.refresh();
  		});
  

  And I have tried

  this.repository.getDataByVals("api/EntityManagement/Hierarchy", searchVals).subscribe(response => {
  			this.hierarchygrid.invalidate();
  			this.hierarchyData = new wjcCore.CollectionView(response);
  		});
  

  Neither seem to work…

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 5:55 pm EST

  I am using a flex grid with tree format. It will not render the grid until a resize is done.
  
  <<<<<<<<<<<
  
  We are unable to replicate the issue at our end, please have a look at the attached sample and let us know if we are missing something to replicate the issue.

  Additionally, it will ‘remove’ the grid if the html element containing the grid is hidden; then it won’t render the grid again until resize.
  
  <<<<<<<<<<<
  
  You need to call grid.invalidate() method after grid becomes visible to adjust the grid layout according to new dimensions.
  
  Please refer to the following code snippet:

  <input #cb type="checkbox" (change)="grid.invalidate()"/>Show hidden grid
  <h3>Grid with hidden container</h3>
  <div style="height:400px;width:1000px;" [hidden]="!cb.checked">
  	<wj-flex-grid #grid class="custom-flex-grid"
  				  [itemsSource]="data"
  				  [childItemsPath]="'items'"				  
  				  [selectionMode]="'ListBox'"
  				  [headersVisibility]="'Column'">
  		<wj-flex-grid-column [binding]="'name'" [width]="'*'"></wj-flex-grid-column>
  		<wj-flex-grid-column [binding]="'length'" [width]="80" [align]="'center'"></wj-flex-grid-column>
  	</wj-flex-grid>
  </div>
  

  You may also refer to the attached sample.

  ~Sharad

  grid_hidden.zip

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 13 November 2018, 8:30 am EST

  So I am using bootstrap tabs to contain the content. These tabs are in a “grandparent” component.

  The page starts in tab1 and the flexgrid is in tab2.

  When I click tab2 the grid does not show up.

  When I use the grid.invalidate() on the tab2 click, it gives error of ```
  
  Cannot read property ‘invalidate’ of undefined

  
  I tried using the (initialized)="init(hierarchygrid)"  method of the grid, but it fires off when the page is loaded (and we only see tab1) so it also has the grid as undefined. 
  
  Is there another grid method I can use instead of (initialized) and call the invalidate there after the tab is clicked?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 November 2018, 3:56 pm EST

  With bootstrap tabs, you may use the ‘select’ event of the tab to invalidate FlexGrid.
  
  Please refer to the following code snippet:

  <tab heading="FlexGrid(With invalidate)" (select)="grid.invalidate()">
  		<div class="tab-content">
  			<wj-flex-grid #grid [itemsSource]="data" (initialized)="init(grid)">
  				<wj-flex-grid-column [binding]="'id'" [header]="'ID'"></wj-flex-grid-column>
  				<wj-flex-grid-column [binding]="'country'" [header]="'Country'"></wj-flex-grid-column>
  				<wj-flex-grid-column [binding]="'date'" [header]="'Date'"></wj-flex-grid-column>
  				<wj-flex-grid-column [binding]="'sales'" [header]="'Sales'"></wj-flex-grid-column>
  			</wj-flex-grid>
  		</div>
  	</tab>
  

  You may also refer to the following sample: https://stackblitz.com/edit/angular-p8xwdp?file=app%2Fapp.component.html

  Alternatively, you may also use Wijmo tabs, wijmo tabs automatically refreshes any wijmo control hosted inside the tabs.
  
  Please refer to the following sample to get started with wijmo tabs:
  
  https://demos.wijmo.com/5/angular2/TabPanelIntro/TabPanelIntro/

  ~Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 14 November 2018, 4:28 am EST

  That does not work for me…

  That sample only works if the grid is in the tab html markup.

  I have the grid in a component within the tab. similar to this =

  <tab heading="FlexGrid(With invalidate)" (select)="invalidateGrid(grid, $event)">
  		<my-firstgrid></my-firstgrid>
  	</tab>
  	<tab heading="FlexGrid(Without invalidate)">
  		<my-secondgrid></my-secondgrid>
  	</tab>
  

  see example which shows grid.invalidate() not working =
  
  https://stackblitz.com/edit/angular-vpacfl?file=app%2Fapp.component.html

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 14 November 2018, 3:55 pm EST

  In this case, you may use invalidateAll() method of Control class.
  
  wijmo.Control.invalidateAll() method takes an HTMLElement reference as a parameter and invalidates all Wijmo control contained in the element.
  
  Please refer to the following code snippet:

  <tab #tabElementRef heading="FlexGrid(With invalidate)" (select)="invalidateGrid(tabElementRef, $event)">
  		<my-firstgrid></my-firstgrid>
  	</tab>
  //equivalent invalidateGrid() method
  invalidateGrid(tabElementRef, e){
      if(!e.tabset){
        return;
      }    
      wjcCore.Control.invalidateAll(tabElementRef);
    }
  

  Updated sample: https://stackblitz.com/edit/angular-kfhnpj?file=app%2Fapp.component.html

  Please refer to this doc for more info on invalidateAll():
  
  https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.Control.Class.html#invalidateAll

  ~Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 15 November 2018, 5:08 am EST

  I have narrowed down the code a bit more and I think the problem is coming from wijmo not connecting to angular event when i use @ViewChild

  I cam calling the method to get the data which resides in the child component and i am calling it from the parent component

  this.parent.childHierarchy.getHierarchyInfo();
  

  Where do I get the wjCore.Control.invalidateAll to work in this manner?

  Example
  
  https://stackblitz.com/edit/angular-dno8pb?file=app%2Fapp.component.ts

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 November 2018, 3:57 pm EST

  You need to call invalidateAll() only once when the tab changes i.e inside the ‘select’ event handler for the tab.

  The issue with the sample was that childHierarchy was not defined in the Tab2ContentComponent.
  
  Please refer to the updated sample here: https://stackblitz.com/edit/angular-vfqp4g?file=app%2Fapp.component.ts

  ~Sharad