Change Cell Backgound Color

Change Cell Backgound Color

Posted by: hoang.nguyen on 20 November 2017, 7:55 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 November 2017, 7:55 am EST

  How do I change the background color of a cell with given row and column number of that cell. This need to be done outside of formatItem, itemFormatter, loadedRows …

  I need to write a function that pass in the flexGrid, row, column, color such as:

  changeCellBackground(flex, row, col, color) {
  
  // Set cell background to color code
  
  }

  Thank you very much.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2017, 5:58 pm EST

  Hi Hoang,
  
  You may call this method in updatedView event but this may cause to performance issue. Hence, we recommend you to call in formatItem event.

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 2:03 am EST

  What I am trying to achieve is that I have color selector buttons. Once user select a color, I need to scan through the entire grid and color selected cells that meet certain criteria with selected color. UpdatedView may not satisfy this condition sir. Is there another way sir?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 3:15 pm EST

  Hi Hoang,
  
  As we understand, you would like to select color from selector and set to the cells based on a condition.

  If yes, the itemFormatter will be suitable for you. You just need to refresh FlexGrid after selecting color from selector.

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 22 November 2017, 2:34 am EST

  Let say when user click a button that has caption Blue, I need to color all cells selected on the grid with blue color. If the green color button is click, I need to color all selected cells with green background. How can I call or trigger itemFormatter? can I write a seperate function and call it when a button on my form is click? This is what I have tried:

  I am checking for cells with matching code, then color it background with the color pass in from the color button selector:

  for (let r = 0; r < this.flex.rows.length - 1; r++) {
  
  for (let c = this.firstDate; c < this.flex.columns.length - 1; c++) {
  
  if (code === this.flex.getCellData(r, c, false)) {
  
  let cellElement = this.flex.cells.getCellElement(r, c);

            if (!Library.isNullOrUndefined(cellElement)) {
              cellElement.style.background = color;
            }
          }
        }
      }
  
      this.flex.invalidate();
  

  This will work, except when I scroll the the flexgrid vertically or horizontally, the color cells now color to other cells.

  Example, I range(25, 1, 27, 3) are matching with the code I am looking for, the background of these cell will be colored with my new color. But if I scroll the grid vertically, now range(25, 1, 27, 3) will be moving downward. the position where range(25, 1, 27, 3) moved downward now occupy by some other cells that were above range(25, 1, 27, 3) . Now range(25, 1, 27, 3) loose all color (back to the original color) and new cells that occupy the position of range(25, 1, 27, 3) get color with new color. It look to me that the color remain in the same coordinate, while cell data are moving upward/downward with mouse scrolling. Is there another way to achieve cell coloring without using itemFormatter fot formatItem. I am tring to improve performance of my app. Thank yo sir very much.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2017, 10:55 pm EST

  Hi Hoang,
  
  The best approach for this is to save color for selected cell range on button click and refresh FlexGrid. In itemFormatter, check range and apply color.

  Please refer to the attached sample for the same.

  ~Manish

  FlexGrid-itemFormatter-cellRange-color.zip

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 28 November 2017, 7:49 am EST

  Thank you Manish