How to provide alternate row colors in Wijmo Flexgrid?

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

  • 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.
  • Replied 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
  • Replied 27 August 2019, 5:45 pm EST

    Version being used; "wijmo": "^5.20191.615",
  • Replied 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
  • Replied 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"
    >
  • Replied 27 August 2019, 6:57 pm EST

    I have given alternatingRowStep = 1
  • Replied 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
  • Replied 28 August 2019, 5:45 pm EST

    I wish to make every alternating row colors same
  • Replied 28 August 2019, 5:47 pm EST

  • Replied 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
  • Replied 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
  • Replied 23 June 2022, 7:07 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)?

  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels