Changing the wj-flex-grid-column background color with Angular2

Changing the wj-flex-grid-column background color with Angular2

Posted by: saso-sabotin on 14 September 2017, 12:12 pm EST

• 

  saso-sabotin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:12 pm EST

  Hi guys!

  I am trying to set the background color for specific column with the color picker (rgb). Since there is only cssClass available to modify the style of the column, I am wondering how can I achieve it with some “ngStyle” inputs? The grid is going to be pretty bit, therefore I think I can not use the cell template or?

  So my code at the moment is:
  
  

  <wj-flex-grid-column *ngFor="let column of columns" [binding]="column.binding" [dataMap]="column.displayValues" [width]="column.width" [cssClass]="'column-background-color-' + column.colorBackground + ' ' + 'column-foreground-color-' + column.colorForeground">

  but I would like to have something like this: (check the ngStyle in the end)
  
  

  <wj-flex-grid-column *ngFor="let column of columns" [binding]="column.binding" [dataMap]="column.displayValues" [width]="column.width" [cssClass]="'column-background-color-' + column.colorBackground + ' ' + 'column-foreground-color-' + column.colorForeground" [ngStyle]="{color: column.bgColor}">

  The down side now is that I would have to use the predefined set of colors in css in order to be able to style the background color.

  Is that even possible?

  Thank you in advance!

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,

  We are looking into it. We shall get back to you on this soon.

  Thanks,
  
  Abhishek

• 

  saso-sabotin

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Thank you very much!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hello Saso,
  
  Thank you for reporting this issue.
  
  We are able to replicate the issue at our end and it looks like a bug. Hence this issue has been escalated to the concerned team for further investigation with tracking id 277979.

  You should use itemFormatter for setting background-color for the columns. Please refer to the following code snippet for the same:

  <wj-flex-grid [itemsSource]="data" [itemFormatter]="itemFormatter">
      <wj-flex-grid-column *ngFor="let col of columns" [header]="col.header" [binding]="col.binding"></wj-flex-grid-column>
  </wj-flex-grid>
  
  //App.ts
  color="red";
  itemFormatter=(panel,r,c,cell){
     if(wjGrid.CellType== panel.cellType){
       cell.style.color=this.color;
     }
  }

  It should help!

  Thanks,
  
  Manish Kumar Gupta

• 

  saso-sabotin

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Ok I tried that itemFormatter but I am getting really weird behaviour.

  itemFormatter = (panel, r, c, cell) => {
      if (panel.cellType === CellType.Cell) {
        const col: ColumnDefinition = this.columns[c];
        if (col.visible === true && col.colorBackground) {
          cell.style.backgroundColor = col.colorBackground;
        }
      }
    };

  This works fine until I start to scroll. When I start to scroll with the scrollbar, then I am getting some random cells colorized. For example when I scroll vertically, then the first column just get colored at the specific rows and always remains on the viewport on the same place. When I scroll horizontally, then ALL THE CELLS are getting randomly colorized with that color. Here are the pictures how it looks like. So the first image shows the inital colorization, 2nd one is when I scroll vertically, and the third one is when I scroll horizontally.
  
  So it doesn’t look like the right solution for now. Is there a bug perhaps?

  Thank you very much for your support!
  
  

  

  

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,
  
  Please try out following code snippet:

  itemFormatter = (panel, r, c, cell) => {
      if (panel.cellType === CellType.Cell) {
        const col: ColumnDefinition = this.columns[c];
        if (col.visible === true && col.colorBackground) {
          color = col.colorBackground;
        }else{
          color="";
        }
         cell.style.backgroundColor=color; // <---- Prevent random color on scrolling since cell re-render on scrolls
      }
    };

  Thanks,
  
  Manish Kumar Gupta

• 

  saso-sabotin

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  That has definitely sorted things out.

  Thank you a lot!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,
  
  Regarding the issue #277979,
  
  It’s impossible to implement ngStyle on a column/cell template level in Ng2.

  Thanks,
  
  Mamish Kumar Gupta

• 

  saso-sabotin

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Ok no problem. The hence the itemFormatter obviously right?

  Thank you!

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 17 June 2018, 7:15 am EST

  Hi,
  
  anything new regarding this issue ? I’ve created a new issue 327612 just before I read this post.

  I tried itemFormatter and CellFactory (Angular 5) - all the same after scrolling I see randomized colorization of the cells (just as described above)

  regards,
  
  Andreas