How to word wrap two line in column header flex grid?

How to word wrap two line in column header flex grid?

Posted by: ramu on 3 December 2017, 9:25 pm EST

• 

  ramu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 December 2017, 9:25 pm EST

  Hi,

  I have used Wijmo 5.20171.282 version.

  I want to word wrap two line or more line in column header text using flex gird.

  
  <wj-flex-grid-column [header]="'Employer Start Date'" [binding]="'StartDate'" width="30*" wordWrap="true">
  
  

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 3 December 2017, 10:25 pm EST

  Please refer to this post

  https://www.grapecity.com/en/forums/wijmo/wrapping-text-only-header-_1

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 4 December 2017, 6:06 pm EST

  The above link is not working. It says “404 Page Not Found”

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 4 December 2017, 8:26 pm EST

  Thanks Abhishek.

  I did manually copied the url and paste. It works.

  Once added below lines. It works as I am expected.

  
  ///// CSS
  .wj-header{
              white-space: pre-wrap !important;
          }
  
  //// Script 
  // resize column header
  flex.autoSizeRow(0,true) 
  flex.autoSizeRow(1,true)
  flex.autoSizeRow(2,true)
  ....
  flex.autoSizeRow(9,true)
  
  

  But I have 10 column in the grid. So I want to added 10 times those line. Is any other option to avoid this?

  Thanks,
  
  Ramu

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 December 2017, 8:51 pm EST

  Hi Ramu,
  
  You can call autoSizeRows or autoSizeColumns method for auto sizing all rows and columns once.

  flex.autoSizeRows();
  flex.autoSizeColumns();
  

  ~Manish

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy

  Posted 9 March 2018, 3:36 am EST

  I simply did this and it worked.

    <wj-flex-grid-column binding="longDescription" [width]="100" [wordWrap]="true">
              <ng-template wjFlexGridCellTemplate cellType="ColumnHeader">
                  <span style="word-wrap: break-word;">Long Description Goes here</span>
              </ng-template>
          </wj-flex-grid-column>
  

• 

  mark.goldin

  • Post Options:
  • Link
    Copy

  Posted 29 November 2019, 10:55 pm EST

  Did you have to do it for every column?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 December 2019, 3:12 pm EST

  Hi Mark,

  If you wish to wrap the headers of only some of the columns, then you will need to add the code above for each of these columns. But, if you wish to wrap the headers of all the columns, then you can use the formatItem event instead of cell template:

  https://stackblitz.com/edit/angular-gs7sa7

  Regards,
  
  Ashwin

• 

  test.pay789

  • Post Options:
  • Link
    Copy

  Posted 4 November 2020, 6:04 pm EST

  [b]Hi,

  I am using Wijmo version 5.20191.612

  I want to word wrap my column header to two or more line using flex gird. I used the below code but still it is not working.[/b]

  <wj-flex-grid-column [header]=“‘Service Partner Branch Details’” [binding]=“‘ServicePart’” width=“30*” wordWrap=“true”>

  ///// CSS
  
  .wj-header{
  
  white-space: pre-wrap !important;
  
  }

  //// Script
  
  // resize column header
  
  flex.autoSizeRow(0,true)
  
  flex.autoSizeRow(1,true)
  
  flex.autoSizeRow(2,true)
  
  …
  
  flex.autoSizeRow(9,true)

  flex.autoSizeRows();
  
  flex.autoSizeColumns();

  Can you please help to resolve this issue.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2020, 5:17 am EST

  Hi,

  You need to provide the wordWrap property inside square brackets (and width too):

  <wj-flex-grid-column [header]="'Service Partner Branch Details'" [binding]="'ServicePart'" [width]="'30*'" [wordWrap]="true">
  

  ~regards