Adjust row height to content height

Adjust row height to content height

Posted by: metrik on 7 August 2018, 7:37 pm EST

• 

  metrik

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 August 2018, 7:37 pm EST

  Hello,

  we are having complicated cells content which contains several rows of text. Only first row of data is visible in cells, other are truncated.
  
  Is there any way to make rows automatically adjust their height based on height of the biggest cell in a row?
  
  Thank you!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 August 2018, 8:35 pm EST

  Hi,
  
  You can use autoSizeRows() method to resize rows automatically to wrap its content.
  
  Please refer to the following fiddle which implements the same:-
  
  http://jsfiddle.net/7sbf401y/1/

  ~Manish

• 

  metrik

  • Post Options:
  • Link
    Copy

  Posted 10 August 2018, 12:53 am EST

  Thanks Manish!

• 

  sai.gokavarapu

  • Post Options:
  • Link
    Copy

  Posted 26 May 2020, 6:40 pm EST

  Hi Manish,

  could you please provide solution for the same problem for React JS.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 May 2020, 5:34 pm EST

  Hi,

  Please refer to the link below for the same sample in React:

  https://stackblitz.com/edit/react-nkokcv

  Regards,
  
  Ashwin

• 

  sai.gokavarapu

  • Post Options:
  • Link
    Copy

  Posted 27 May 2020, 5:39 pm EST

  Hi Ashwin,

  Thanks for the reply,

  i am using this flexgrid, https://www.grapecity.com/wijmo/demos/Grid/Events/Selection/react

  could you please help me in implementing the same for the above flexgrid mentioned.

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2020, 4:35 pm EST

  Hi,

  Please refer to the link below for the same:

  https://stackblitz.com/edit/react-o6snlb

  In the sample, the initialized event is used to automatically resize the rows and the selectionChanged event is used to calculate the count, average, etc.

  The main method used is the getSelectionStates method. This method iterates over each selected cell and calculate the values accordingly.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 31 May 2020, 3:57 pm EST

  Hi,

  It seems that you requirements are different. You need to auto-size the columns instead of the rows. Try using the autoSizeColumns method instead of autoSizeRows.

  https://stackblitz.com/edit/react-aytdl9

  Also, in your code snippet, you have set the wordWrap property of the FlexGrid to true. But wordWrap is not a property of FlexGrid instead it is of FlexGridColumn. So, if you need a column to be wrapped, then only set its wordWrap to true same as I did in the previous sample.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 June 2020, 4:20 pm EST

  Hi,

  Have you called the autoSizeColumns method in the initGrid event. It seems that you have called the auto-size method only in the loadedRows event and not in the initGrid event like the sample that I provided. Can you please update your code accordingly?

  https://stackblitz.com/edit/react-bfu7ap

  ~regards