Wj-rowheaders same color as rows

Wj-rowheaders same color as rows

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

• 

  jmisquez

  • Post Options:
  • Link
    Copy
  • Jump To Answer

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

  Hello,

  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

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 18 October 2022, 8:46 pm EST

  Hi,

  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

  Regards

• 

  jmisquez

  • Post Options:
  • Link
    Copy

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

  Hello,

  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);
        this.paintHeaders(hti.grid);
      })
  

  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:
  
  

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 20 October 2022, 10:25 pm EST

  Hi,

  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

  Regards