How to increase height of flexsheet to touch to the bottom of the screen

How to increase height of flexsheet to touch to the bottom of the screen

Posted by: zam.abdulvahid on 8 February 2018, 8:28 am EST

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 February 2018, 8:28 am EST

  Hi Team,

  I’ve been trying to override the height of flexsheet / flexgrid to touch to the bottom of my screen so that i will get more area to play around.

  I’m unable to achieve it and the sheet always adds a scrollbar and shrinks. Screenshot attached.

  Could you please help me with an option to achieve it.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 February 2018, 4:27 am EST

  Hi Zam,
  
  For this, you need to set FlexSheet/FlexGrid hostElement style.height equals to browser window height.

  ~Manish

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy

  Posted 12 February 2018, 7:36 am EST

  Hi Manish,

  Can you provide a sample code for the same.

  ~Zam

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2018, 11:33 pm EST

  Please try the sample code

  
    $scope.initialized = function (s, e) {
       
          var flex = s;
          $scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
          s.hostElement.style.height = document.body.scrollHeight+"px";
     
          $scope.$apply();
       }
      }
  

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy

  Posted 22 March 2018, 6:14 am EST

  Hello,

  I have tried applying a value as below. But was not working as expected (angular 2)

  @ViewChild('flexgridLazyload') flexgridLazyload: wjcGrid.FlexGrid;
  
  constructor() {
  	this.flexgridLazyload.hostElement.style.height = 600 + 'px';
  }
  

  I could see another height getting applied which is lesser than the above value. Any workarounds?

  Thanks.
  
  Zam

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 23 March 2018, 3:31 am EST

  Hi,

  Flexgrid/Flexsheet is designed to match its height/width w.r.t to its parent.
  
  So you can resize the container holding the grid to resize the grid without doing any-additional setup in grid.

  If you are unable to increase its height beyond a certain point then it might be due to css conflict related to setting of max-height of container

  Here is an example of flexgrid which has its height equal to document size right out of the box.

  https://stackblitz.com/edit/angular-1txpqh

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy

  Posted 23 March 2018, 8:48 am EST

  Thank you Abhishek.

  You were right, it was the max-height property in css which was creating the issue. Thank for your help in clarifying.

  ~Zam