MultiRow Issue - Why the ColumnHeaders of MultiRow has two rows

MultiRow Issue - Why the ColumnHeaders of MultiRow has two rows

Posted by: guo-z2 on 22 August 2024, 3:35 am EST

• 

  guo-z2

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 August 2024, 3:35 am EST

  I used a simple layout definition to define my table as the following:

  [
    { cells: [{ binding: 'country', header: 'Country' }] },
    { cells: [{ binding: 'date', header: 'Date' }] },
    { cells: [{ binding: 'downloads', header: 'Downloads' }] },
    { cells: [{ binding: 'sales', header: 'Sales' }] },
    { cells: [{ binding: 'active', header: 'Active' }] },
  ]

  And I need to set the background of the header by code.
  
  When I tried to visit the element of the header, I found there is two rows. And I confirm this thing by visiting

  flexGrid.columnHeaders.rows

  .

  Is this the known issue?

  And how can I visit the right header cell?

  Thanks for any help.

• 

  guo-z2

  • Post Options:
  • Link
    Copy

  Posted 23 August 2024, 3:04 am EST

  By the way, should I just ignore the first row and visit and change the second row? I find that I can get the correct reaction by modifying the second row in columnHeaders.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 23 August 2024, 5:45 am EST

  Hi,

  The columnHeaders panel in the Multirow contains an extra row at the first index and this behavior is by design. To get the correct cell element you can use the row indexes starting from 1. Please refer to the following sample that demonstrates how you can change the color of column headers in the Multirow control - https://stackblitz.com/edit/js-1czkyk?file=index.js

  In case, you are wondering why there is an extra row in columnHeaders panel, then it is for showing collapsedHeaders row, which becomes active after setting the ‘collapsedHeaders’ property of the Multirow. You can refer to the following API link for more information about this property - https://developer.mescius.com/wijmo/api/classes/wijmo_grid_multirow.multirow.html#collapsedheaders

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

  Regards

• 

  guo-z2

  • Post Options:
  • Link
    Copy

  Posted 25 August 2024, 8:56 pm EST

  Thanks for your help. It solved my confusion.