How to provide alternate row colors in Wijmo Flexgrid?

How to provide alternate row colors in Wijmo Flexgrid?

Posted by: reeshabh.choudhary on 26 August 2019, 5:31 pm EST

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 5:31 pm EST

  I am using a wijmo flex grid and I want alternate rows of grid to have same color.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 2:45 pm EST

  Hi,

  Depending on which version you are using, there are two ways to make the color of alternating rows same:

  From 19v1 version of wijmo, you may use the alternatingRowStep property of FlexGrid:

  flexGrid.alternatingRowStep = 0
  

  And, before 19v1, you may set the showAlternatingRows property of FlexGrid to false:

  flexGrid.showAlternatingRows = false
  

  Regards,
  
  Ashwin

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 5:45 pm EST

  Version being used; “wijmo”: “^5.20191.615”,

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 6:24 pm EST

  Hi,

  For the provided version, you may use set the alternatingRowStep property to 0.

  flexGrid.alternatingRowStep = 0;
  

  Reference: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#alternatingrowstep

  ~regards

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 6:57 pm EST

    <wj-flex-grid #flexGridRef
                  (initialized)="onFlexGridInit(flexGridRef)"
                  (beginningEdit)='onCellEditStart($event)'
                  (cellEditEnded)='onCellEditEnd($event)'
                  [style.height]="defaultOptions.gridHeight"
                  [itemsSource]="dataSource"
                  [allowAddNew]="defaultOptions.allowAddNew"
                  [allowDelete]="defaultOptions.allowDelete"
                  [allowSorting]="defaultOptions.allowSorting"
                  [autoGenerateColumns]="defaultOptions.autoGenerateColumns"
                  [frozenColumns]="defaultOptions.frozenColumns"
                  [frozenRows]="defaultOptions.frozenRows"
                  [isDisabled]="defaultOptions.isDisabled"
                  [isReadOnly]="defaultOptions.isReadOnly"
                  [selectionMode]="defaultOptions.selectionMode"
                  [alternatingRowStep]="defaultOptions.alternatingRowStep"
                  [showSort]="defaultOptions.showSort"
                  [stickyHeaders]="defaultOptions.stickyHeaders"
                  [showSelectedHeaders]="defaultOptions.showSelectedHeaders"
                  [headersVisibility]="defaultOptions.headersVisibility"
      >
  

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 6:57 pm EST

  I have given alternatingRowStep = 1

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 2:53 pm EST

  Hi,

  If you will set the value of alternatingRowStep to 1, then every alternating row in the FlexGrid will have different color and if you will set the value to 0, then every row will have the same color.

  Could you please confirm whether you wish to make the color of every row same or every alternating row’s color same?

  ~regards

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 5:45 pm EST

  I wish to make every alternating row colors same

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 5:47 pm EST - Updated 3 October 2022, 2:54 am EST

  

  832×481 35.8 KB

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 5:47 pm EST

  I have given alternatingRowStep as 1. But even after giving value as 0, I am getting same result

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 August 2019, 3:22 pm EST

  Hi Reeshabh,

  From what I understand, you wish to add a different color to every alternating row. For eg, the color of row 1, row 3, row 5, etc should be same but different from alternating rows like row 2, row 4, etc.
  
  If this is your requirement, then you may set the value of alternatingRowStep to 1 and use CSS to apply a different color to the row:

  In HTML:

  <wj-flex-grid [alternatingRowStep]="1" [itemsSource]="source">
  </wj-flex-grid>
  

  In CSS:

  .wj-cell.wj-alt {
    background: cyan !important;
  }
  

  Refer to the sample below:

  https://stackblitz.com/edit/angular-hpacdx

  ~regards

• 

  giovane.martins

  • Post Options:
  • Link
    Copy

  Posted 23 June 2022, 7:07 am EST - Updated 3 October 2022, 2:54 am EST

  Has any way to do like image bellow (full row based on group colum with same style, and odd/even by the group column)?

  

  1339×168 8.04 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 23 June 2022, 11:04 pm EST

  Hello,

  We have provided a response on the support portal. Please refer to the link for the same: https://www.grapecity.com/my-account/my-support/case/CAS-32287-M8M5V6

  Here is a copy of the response:

  You may add a custom class to the cells you want to show colored by handling the formatItem event of FlexGrid. Please refer to the sample link below demonstrating how to apply custom CSS to alternating rows:

  https://stackblitz.com/edit/js-ycpnw7?file=style.css,index.js

  Regards