Set different height for GroupHeader, row's height,and for columnHeaders

Set different height for GroupHeader, row's height,and for columnHeaders

Posted by: nnaina1997 on 25 October 2023, 9:41 pm EST

• 

  nnaina1997

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 October 2023, 9:41 pm EST

  Hi All,

  I have a requirement where I need to set different heights for GroupHeaders, columnHeaders, and data rows.

  I am currently using this in the scss file
  
  .wj-flexgrid .wj-row .wj-cell:not(.wj-header):not(.wj-group)[role=“gridcell”] {
  
  height: 88px !important;
  
  }

  /* Set a specific height for group cells */
  
  .wj-flexgrid .wj-cell.wj-group {
  
  height: 48px !important;
  
  }

  But its not working as it’s leaving extra 40px white gap after the groupheaders.

  export function getData() {
    return [
      {
        name: 'Washington',
        type: '',
        population: null,
        cities: [
          { name: 'Seattle', type: 'delhi', population: 652 },
          { name: 'Spokane', type: 'city', population: 210 }
        ]
      },
      {
        name: 'Oregon',
        type: '',
        population: null,
        cities: [
          { name: 'Portland', type: 'agra', population: 609 },
          { name: 'Eugene', type: 'uk', population: 159 }
        ]
      },
      {
        name: 'California',
        type: '',
        population: null,
        cities: [
          { name: 'Los Angeles', type: 'uk', population: 3884 },
          { name: 'San Diego', type: 'city', population: 1356 },
          { name: 'San Francisco', type: 'uk', population: 837 }
        ]
      }
    ];
  }

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 26 October 2023, 7:54 pm EST

  Hello,

  To adjust the row heights in the FlexGrid, you can utilize the loadedRows event. Simply set the height of data and group rows based on the hasChildren property of the GroupRow. Additionally, for customizing the height of columnHeader rows, you can directly modify the defaultSize property within the rows collection of the columnHeader panel. For a more detailed example and a code snippet, please refer to the sample link below for reference.

  //for data and group rows
  loadedRows: function (s, e) {
        s.rows.forEach(function (row) {
          if (row.hasChildren) {
            row.height = 40;
          } else {
            row.height = 20;
          }
        });
      }
  //
  //for header rows
  grid.columnHeaders.rows.defaultSize = 50;

  Sample link: https://stackblitz.com/edit/js-53sbfw?file=style.css,index.js

  Regards

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 26 October 2023, 8:29 pm EST

  Thanks It worked

• 

  nnaina1997

  • Post Options:
  • Link
    Copy

  Posted 9 November 2023, 6:34 pm EST

  Hi

  I am facing one issue while scrolling there’s a lag coming between row headers and row. they both should move together as a row the lag should not be there.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2023, 4:12 pm EST

  Hello,

  We apologize but we cannot replicate the issue at our end, could you please refer to the below sample used to replicate the issue and let us know if any changes are required to replicate the issue at our end?

  If you are facing the issue only in your application and not in the below-shared sample, it might be possible that the issue is caused due to some other factors in your application therefore I would request you to please share a small sample replicating the issue along with the environment details in which you are facing this issue.

  Sample link: https://stackblitz.com/edit/js-ew2grd?file=data.js,index.js

  Regards