Wijmo grid row headers instead of column headers

Wijmo grid row headers instead of column headers

Posted by: siddushar on 11 December 2018, 3:47 am EST

• 

  siddushar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 December 2018, 3:47 am EST - Updated 3 October 2022, 11:15 am EST

  Hello all, i want row header instead of column header as shown in picture…how can i do this using wijmo grid…?

  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 December 2018, 6:37 pm EST

  Hi,

  Could you please explain about the requirement some more?
  
  If we understand correctly you would like the column headers to be hidden whereas some value in row header. You may do so easily in the following steps:
  
  • set autoGenerateColumns to false // to stop grid from auto-generating columns
  
  • generate only the required columns

  var grid=new wijmo.grid.FlexGrid('#theGrid',{
    itemsSource:getData(50),
    autoGenerateColumns: false,
    columns: [
      {binding: 'value'}
    ]
  });
  

  • Hide column headers by setting the ‘headersVisibility’ property to ‘wijmo.grid.HeadersVisibility.Row’

  grid.headersVisibility = wijmo.grid.HeadersVisibility.Row;
  

  • Use formatItem event to customize the content of rowHeaders.

  grid.formatItem.addHandler((s,e)=>{
    // not a rowHeader cell, do not format
    if(e.panel.cellType != wijmo.grid.CellType.RowHeader){
      return; 
    }
    
    let dataItem = s.rows[e.row].dataItem;
    // set value for row header
    e.cell.innerText = dataItem.rowHeader;
  });
  

  You may also refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/js-whygkm?file=index.js

  Please let us know if you had a different requirement than this.

  ~Sharad

• 

  siddushar

  • Post Options:
  • Link
    Copy

  Posted 12 December 2018, 8:25 am EST

  Hi,
  
  my requirement is there should not be any column headers. the should be only two columns without column header and first column should act as header and second column should acts as data(user can edit). Is this possible using angular 2 and above…?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 December 2018, 8:03 pm EST

  Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/angular-a2c5f2?file=app%2Fapp.component.html