FlexGrid Column Header Text Displaying Vertically on Chrome

FlexGrid Column Header Text Displaying Vertically on Chrome

Posted by: kun.leeing on 30 May 2019, 3:24 am EST

• 

  kun.leeing

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 May 2019, 3:24 am EST

  Hi guys,

  I am trying to display vertical texts on headers of a Flexgrid.
  
  I am doing this.
  
  itemFormatter = (panel: wijmoGrid.GridPanel, rowIndex: number, columnIndex: number, cell: HTMLElement) => {
  
  if (panel.cellType == wijmoGrid.CellType.ColumnHeader) {
  
  cell.innerHTML = ‘’ + cell.innerHTML + ‘’;
  
  }
  
  }
  
  it is not working in Chrome, then I tried
  
  cell.innerHTML = ‘’ + cell.innerHTML + ‘’;

  It worked in IE, but still not in Chrome. Could someone help on this?

  Thanks
  
  Kun

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 31 May 2019, 7:17 am EST

  Hi Kun,

  The writing-mode CSS property can be used to vertically align the text of the column header. But to make it work in chrome you need to set its value to ‘vertical-lr’. In IE, vertical-lr is not supported, so we can use the ‘-ms-writing-mode’ property. Please refer to the code snippet below:

  
  itemFormatter = (panel, row, col, cell) =>  {
      if(panel.cellType == wjcGrid.CellType.ColumnHeader) {
        let oldHTML = cell.innerHTML;
        cell.innerHTML = `<span class="vertical">${oldHTML}</span>`;
      }
    }
  

  In your CSS file:

  
  .vertical {
    writing-mode: vertical-lr; /* chrome */
    -ms-writing-mode: tb-rl; /* ie */
  }
  

  You may also refer to the sample below:
  
  https://stackblitz.com/eqdit/angular-aymke4?file=src/app/app.component.ts

  ~sharad

• 

  kun.leeing

  • Post Options:
  • Link
    Copy

  Posted 5 June 2019, 11:51 pm EST

  Many thanks, sharad. That is very kind of you.