Flexgrid Body Autosize

Flexgrid Body Autosize

Posted by: johnny.su on 12 February 2019, 6:53 am EST

• 

  johnny.su

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 February 2019, 6:53 am EST - Updated 3 October 2022, 11:12 am EST

  Hi,

  Is there a autosize setting for the flexgrid body? The body seems to take up 100% of the div that it’s in even though there’s not enough columns to take up the whole width of the div. Because of that, clicking on the blank space to the right of the last column doesn’t invoke the grid’s lostFocus event because of the body is there.

  

  1038×100 14.3 KB

  Regards,
  
  Johnny

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2019, 4:35 pm EST

  Hi Johnny,

  This is the default behaviour of the grid that it takes up all the available space.
  
  If you would like to restrict the width to its content, you may simply set the width of the container to auto using CSS.
  
  Please refer to the following code snippet:
  
  .wj-flexgrid{
  
  width: auto;
  
  }
  
  Another alternative is to set the column width to ‘star sizing’ to autofill all the available space of the grid. You may refer to the following doc for more info on star sizing:
  
  https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.Column.Class.html#width
  
  You may also refer to the following sample which demonstrates the differance between the two approaches:
  
  https://stackblitz.com/edit/js-9uyg3l?file=index.js

  ~Sharad

• 

  johnny.su

  • Post Options:
  • Link
    Copy

  Posted 13 February 2019, 12:18 pm EST

  We decided to set the grid’s width to auto since our Product Management doesn’t like the ‘star sizing’ option. Now I just need to figure out how to make the table scroll horizontally when the grid’s parent element is smaller than the grid. The grid body now extends beyond the parent div.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 February 2019, 7:25 pm EST

  We may set the max-width to 100% to limit grid’s width to be not more than the parent’s width.
  
  Please refer to the following code snippet and updated sample:

  .wj-flexgrid{
  	width: auto;
  	max-width: 100%;
  }
  

  https://stackblitz.com/edit/js-vbszrj?file=index.js

• 

  johnny.su

  • Post Options:
  • Link
    Copy

  Posted 14 February 2019, 3:36 am EST

  That’s an easy fix. Thank you Sharad!