FlexGrid and FlexGridDetail

FlexGrid and FlexGridDetail

Posted by: DevelopmentToolsSupport on 23 October 2023, 8:46 pm EST

• 

  DevelopmentToolsSupport

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 October 2023, 8:46 pm EST - Updated 23 October 2023, 8:51 pm EST

  How to apply css styling for FlexGrid header and FlexGridDetail header seperatly and remove the background color once we select the child record
  
  

  

  891×310 4.61 KB

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 24 October 2023, 6:38 pm EST

  Hi,

  To style the FlexGrid present in the detail row please use the “.wj-detail” selector in the CSS. You may then style different part and states of FlexGrid just like the parent FlexGrid.

  You can set the styling for the parent grid’s selected detail row using the following CSS:

  /* Remove the background color from the detail row. */
  .wj-detail.wj-state-selected,
  .wj-detail.wj-state-multi-selected {
    background: unset !important;
    color: unset !important;
  }

  Please use the below CSS to style the headers of the parent grid:

  /* Styling of column headers of parent grid */
  .wj-flexgrid .wj-colheaders .wj-header {
    background-color: rgb(88, 233, 153);
  }
  
  /* Styling of row headers of parent grid */
  .wj-flexgrid .wj-rowheaders .wj-header {
    background-color: rgb(172, 141, 255);
  }
  
  /* Styling of header cells present in the topLeft part of parent grid */
  .wj-flexgrid .wj-topleft .wj-header {
    background-color: rgb(172, 141, 255);
  }

  Please set the below CSS to set the styling of headers of the child grids:

  /* Styling of column headers of child grids */
  .wj-detail .wj-flexgrid .wj-colheaders .wj-header {
    background-color: orange;
  }
  
  /* Styling of row headers of child grids */
  .wj-detail .wj-flexgrid .wj-rowheaders .wj-header {
    background-color: yellow;
  }
  
  /* Styling of header cell present in topLeft part of child grids */
  .wj-detail .wj-flexgrid .wj-topleft .wj-header {
    background-color: yellow;
  }

  Please refer to this sample for reference: https://stackblitz.com/edit/react-f6xdgr

  Regards
  
  Anirudh