Wj-rowheaders same color as rows

Posted by: jmisquez on 17 October 2022, 10:32 pm EST

    • Post Options:
    • Link

    Posted 17 October 2022, 10:32 pm EST - Updated 17 October 2022, 10:37 pm EST


    I want to make wj-rowheaders have the same color has the row that they are.

    for example:

    current behaviour:

    also the row can be selected and the background of the rowheader should have same color like in the image

  • Posted 18 October 2022, 8:46 pm EST


    To change the color of the rowHeaders, You may handle the ‘selectionChanged’ event of the grid, to dynamically change the rowHeaders background color, when the corresponding row is selected. Please refer to the below code snippet for reference:

    .wj-flexgrid .wj-rowheaders .wj-cell{
      background-color: white;
    .wj-flexgrid .wj-rowheaders .wj-header-alt{
      background-color: #f7f7f7;

    You can refer to this sample for its full implementation https://stackblitz.com/edit/js-pqbpij?file=index.js

    You can also hide the row headers and use the selector checkbox in the first column of the flexgrid, and then style the cells as per your requirements using CSS styles(if it fits your current implementation).

    To hide the rowHeaders, set the grid’s ‘headersVisibilty’ property to ‘Column’,

    To display selector checkboxes in the first column set the selector’s ‘column’ property to 0.

    You can refer to the following sample for its implementation https://stackblitz.com/edit/js-vyigdb?file=index.js


  • Posted 19 October 2022, 3:38 pm EST - Updated 19 October 2022, 3:44 pm EST


    How i can apply this solution for Angular 14 and also i want the same behavior when the user hover on the row, the row is being colored as expected when i hover but the rowHeaders remains #ffffff or #f7f7f7.

    i try it doing something like this, but there’s a delay in the rowheader paint:

        flexGrid.hostElement.addEventListener('click', (e) => {
          let hti = flexGrid.hitTest(e);

    here’s an example of how the delay looks like:

    after a second or less / and when i hover i want to paint the header too:

  • Posted 20 October 2022, 10:25 pm EST


    You can add ‘mousemove’ eventListener on the flexgrid’s hostElement, and add/remove a hover class for color change on the grid rows along with the row headers to implement hovering effect on the rowHeaders.

    You can refer to the following sample (in Angular 14) for it’s implementation https://codesandbox.io/s/flexgrid-rowheader-hover-ee90qb


Need extra support?

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

Learn More

Forum Channels