Customize row height in grid

Customize row height in grid

Posted by: nilesh_nichal on 13 June 2024, 9:09 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 13 June 2024, 9:09 am EST - Updated 13 June 2024, 9:14 am EST

  Hi Team,

  We need the custom row height in grid table. Please refer the attached screenshot where for the Product Image we need to have same row height and for the remaining(SAP. WS1) we need smaller row height(as you can see its not looking good, we want to have customize row height for product image), you can refer stackblitz for https://stackblitz.com/edit/angular-ivy-cfzz3r?file=src%2Fapp%2Fapp.component.html.
  
  Here in the example we need country Japan to have larger height and remaining we need small height.
  
  

  

  1512×406 19.3 KB

  Please let me know if having understanding issue.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 14 June 2024, 1:13 am EST

  Hi Nilesh,

  To set specific row heights conditionally, you can handle the loadedRows event of FlexGrid and set the height property of the desired row based on certain conditions. In the example, I have checked the rows with the country Japan and updated their row height accordingly. Please refer to the code snippet and sample link below for reference.

    handleLoadedRows(s, e) {
      for (let r = 0; r < s.rows.length; r++) {
        let row = s.rows[r],
          dataItem = row.dataItem;
        if (dataItem && dataItem['country'] === 'Japan') {
          row.height = 50;
        }
      }
    }

  Sample link: https://stackblitz.com/edit/angular-ivy-etalhj?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Regards