Cannot change Background color on groupRow

Cannot change Background color on groupRow

Posted by: hoang.nguyen on 7 September 2018, 8:48 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 September 2018, 8:48 am EST

  I have insert a groupRow into my flexGrid footer but I cannot change it cell format (background color, color, font …)

  This is my css:

  .wj-header {
  
  background-color: #5B9BD5;
  
  color: white;
  
  border-width: 0.1;
  
  border-left: 1px solid lightgray;
  
  border-bottom: 1px solid lightgray;
  
  text-align: center;
  
  word-wrap: break-word;
  
  font-weight: normal;
  
  text-align: center !important;
  
  font-size: .85em !important;
  
  }

  .wj-grp-row {
  
  color: red !important;
  
  background-color:yellow !important;
  
  }

  This is my ts:

  initFlex(s: wjGrid.FlexGrid): void {
  
  const grpRow = new wjGrid.GroupRow();

  grpRow.cssClass = 'wj-grp-row';
  
  s.columnHeaders.rows[0].wordWrap = true;
  s.columnFooters.rows.push(grpRow);
  
  s.autoSizeRow(1, true);
  

  }

  Please help me. Thank you very much.

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 9 September 2018, 12:20 pm EST

  No matter what I put in wj-grp-row will not affect. The format show wj-header overwrites wj-grp-row

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 9 September 2018, 4:13 pm EST

  Hi,

  Selector classes set using cssClass property is supposed to apply only for regular cells. Hence ‘wj-header’ overwrites ‘wj-grp-row’ when it is pushed into the grid.columnFooters collection.
  
  To style the group row in footers you may use ‘wj-header’ class in combination with ‘wj-colfooters’.
  
  Please refer to the following code snippet:-

  .wj-colfooters .wj-header {
  	background-color: 'yellow';
  	color: 'red';
  }
  

  You may also refer to the following sample: https://stackblitz.com/edit/angular-vo8wzg?file=src%2Fstyles.css

  ~Sharad

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 10 September 2018, 1:36 am EST

  Thank you sir. It works like a charm!

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 11 September 2018, 8:07 am EST

  Hi Sharad,

  By using css:

  .wj-colfooters .wj-header {
  
  background-color: #FFEECC;
  
  color: #666666;
  
  border-width: 0.1;
  
  border-left: 1px solid lightgray;
  
  border-bottom: 1px solid lightgray;
  
  text-align: right;
  
  word-wrap: break-word;
  
  font-weight: bold;
  
  font-size: .85em;
  
  }

  and:

  .wj-header {
  
  background-color: #5B9BD5;
  
  color: white;
  
  border-width: 0.1;
  
  border-left: 1px solid lightgray;
  
  border-bottom: 1px solid lightgray;
  
  text-align: center !important;
  
  word-wrap: break-word;
  
  font-weight: normal;
  
  font-size: .85em;
  
  }

  It works, I can change background and foreground color. However, if I change text-alignment in footer will also change the header. Is there a way to work around this one sir?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2018, 4:12 pm EST

  Hi,

  The issue is arising because you are using only .wj-header class to apply style which is valid for every cell with .wj-header class.
  
  To avoid the confusion, please try to use a combination of classes.
  
  Please refer to the following code snippet:

  //for the cells in the header
  .wj-colheaders .wj-header {
  	/* header styles goes here*/
  }
  //for the cells in the footer
  .wj-colfooters .wj-header {
  	/* footer styles goes here*/
  }
  

  You may also refer to the following sample:- https://stackblitz.com/edit/angular-7e2mjm?file=src%2Fstyles.css

  Regards
  
  Sharad

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 12 September 2018, 1:27 am EST

  Thank you sir very much