Change group header style in Flexgrid

Change group header style in Flexgrid

Posted by: omarovd on 16 August 2021, 5:59 pm EST

• 

  omarovd

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 August 2021, 5:59 pm EST - Updated 3 October 2022, 12:46 pm EST

  Hello,
  
  I’m trying to change the style in the group header by using cssClassAll, but it isn’t working. Working with React on the frontend side.
  
  The second issue is the issue with cells merging in the group header. Could you help?

  Thanks.

  

  1120×400 18.8 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 August 2021, 7:15 am EST

  Hi,

  As per my observation from your screenshot, you are using the Hierarchical Data representation FlexGrid and the group rows are the parent rows, if that’s the case then

  We are unable to replicate your issue for adding cssClassAll, we have added the cssClassAll to the first column in the sample attached, please refer to the sample link given below:

  https://stackblitz.com/edit/react-b3ljvh?file=index.js

  Also, you can easily apply the CSS to only the parent group row like:

  .wj-row[aria-level='1'] .wj-cell {
    background-color: rgb(247, 222, 0) !important;
  }
  

  As you are using the hierarchal data the cell merging wouldn’t work, you need to manually merge the cells by firstly removing the data from the other cells on that group row.

  If you are using the group row by setting the group description of the CollectionView, then

  You can use the .wj-cell.wj-group class to add styling to the group rows. Please refer to the code snippet below:

  .wj-cell.wj-group{
      background-color: red;
  }
  
  

  You don’t need to merge the cells as group rows would be already merged as you required.

  If you are using any other approach then please do let us know the following points:

  1. How are you adding the group rows?
  2. How are you adding the cssClassAll and where?

  If possible could you please provide a sample depicting your issue?

  Regards,
  
  Ashwin

• 

  omarovd

  • Post Options:
  • Link
    Copy

  Posted 17 August 2021, 9:53 am EST

  Hello Ashwin,
  
  Thanks a lot for the quick answer.
  
  The way with ```
  
  .wj-row[aria-level=‘1’] .wj-cell