Break cell content and increase the particular row height

Break cell content and increase the particular row height

Posted by: saisreeja.gadi on 31 October 2023, 10:30 am EST

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 October 2023, 10:30 am EST - Updated 31 October 2023, 12:23 pm EST

  Hi,
  
  In Wijmo Flexgrid If I have large data in the particular cell. I need to break text into multiple lines and increase that particular row height. I tried to break cell content using \n. \n is not working to break the content.

  I tried with wordwrap but I am getting issue with different scenarios. I am trying to implement this. https://www.grapecity.com/wijmo/demos/Grid/CustomCells/Sparklines/angular
  
  But here how can increase particular row height. If the particular cell content is too long. Without increase that particular row height I cannot able to see the full content in the cell. I used this also flex.rows[0].height = 600 but its not working

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2023, 6:08 pm EST

  Hi,

  If you want to resize the height of particular rows then, you can handle the loadedRows event and set the height property of a specific row in the handler of this event.

  To increase the default size of all the rows please handle the initialized event and set the defaultSize property of rows property of FlexGrid to the required size.

    initializeGrid(flex: wjcGrid.FlexGrid) {
      // Increase the default size of the rows
      flex.rows.defaultSize = 68;
  
     // ...code
    }

  Also, if you want to manually break the cell content by inserting “\n” (newLine) then to see the changes in that Column please set the multiLine property of that column to true.

  For example, in this sample, the height of all the rows is set using the defaultSize property, and the height of rows 1, 4, 7, and 10 is set to 120. Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-jdbqnz

  Please refer to these API links for more information:

  1. defaultSize: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.rowcollection.html#defaultsize
  2. loadedRows: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.flexgrid.html#loadedrows
  3. multiLine: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.column.html#multiline

  If the content of cells in a Column is large then you can set the wordWrap property of the column. This will allow the content of cells to wrap to fit the available column width. However, to see the wrapped text the height of the rows are needed to be increased. Please use the autoRowHeights property of the FlexGrid to auto-size the rows as per the content.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-xj3qc1

  However, if you have a large number of rows, then it is recommended to manually auto-size only the rows that are present in the view. This can be done by using the autoSizeRow() method of the FlexGrid class. Please refer to this DEMO for reference: https://developer.mescius.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/angular

  Please refer to the below API links for more information:

  1. autoRowHeights: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.flexgrid.html#autorowheights
  2. wordWrap: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.column.html#wordwrap
  3. autoSizeRow: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.flexgrid.html#autosizerow

  If you face any issues while following the above approaches then please let us know.

  Regards
  
  Anirudh

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy

  Posted 1 November 2023, 12:39 am EST - Updated 1 November 2023, 12:47 am EST

  Hi Anirudh,

  Actually I used Wordwrap and Multiline true. I am getting issue like all the rows size got increased. I want the row size based on the content. For one row I have huge content. All the rows occupied that much space.
  
  Getting extra space for all the rows. How can I remove that. Can you please help me on this.

  

  Regards

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 1 November 2023, 10:25 pm EST

  Hi,

  This is possible if you are using WjFlexGridCellTemplate to put data in cells of a particular column. Using WjFlexGridCellTemplate will automatically auto-size the rows. However, this will increase the grid’s default row height hence all the rows will have the same height which will be equal to the height of the tallest row. In this case, you may set the autoSize property of WjFlexGridCellTemplate to false and manually autoSize the rows in the loadedRows event.

  This is also possible if the defaultSize property of the rows collection of FlexGrid is explicitly set in the code.
  
  So, please ensure that you are not explicitly setting defaultSize property in the code.

  However, if you are not using the WjFlexGridCellTemplate and is still facing this issue, then please share a small working sample replicating the issue. This is required because in the provided samples I am not able to replicate such behavior in the suggested samples when autoRowHeights is set to true or when rows are manually resized.

  Please refer to this sample for reference:
  
  (wordWrap + multiLine + autoRowHeights) https://stackblitz.com/edit/angular-ivy-lhvylx

  Regards
  
  Anirudh

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy

  Posted 1 November 2023, 11:08 pm EST - Updated 1 November 2023, 11:37 pm EST

  Hi,

  I am using WjFlexGridCellTemplate in my code. As you said I have implemented autoSize property of WjFlexGridCellTemplate to false and manually autoSize the rows in the loadedRows event. But still getting the issue.

  <wj-flex-grid #flex class="dc-flex" (cellEditEnded)="cellEditEnding(flex, $event)" (beginningEdit)="onCellEditBeginning(flex, $event)" (initialized)="init(flex)" [itemFormatter]="itemFormatter" [(itemsSource)]="data" [autoGenerateColumns]="false" [autoRowHeights]="false">

  flex.columns[i].wordWrap = true;
  flex.columns[i].multiLine = true;
  flex.loadedRows.addHandler((s, e) => {
       flex.autoSizeRows();
  });

  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 2 November 2023, 5:37 pm EST

  Hi,

  You can set the ‘autoRowHeights’ property of the flexGrid to true to auto-size the grid rows. Please refer to the following sample for the same - https://stackblitz.com/edit/angular-ivy-cxdtbw?file=src%2Fapp%2Fapp.component.html

  In case, you observe any performance hit in the grid after setting the ‘autoRowHeights’ property, as autoSizing all rows in the grid could be a heavy process when the grid has a large number of rows, then you can also perform the row auto-sizing asynchronously by referring to the following sample - https://developer.mescius.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/angular

  In case, you still face any issues, please let us know.

  Regards

• 

  saisreeja.gadi

  • Post Options:
  • Link
    Copy

  Posted 2 November 2023, 5:45 pm EST

  Hi

  Thanks. Its working now