Row background changing

Row background changing

Posted by: bmakhlin on 12 December 2018, 7:19 am EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 December 2018, 7:19 am EST

  Hi,
  
  I set cell background to gray for some rows and set those rows as read only using following code

  
  itemFormatter = (panel, r, c, cell) => {
          if (panel.cellType === wjcGrid.CellType.Cell) {
              if (panel.rows[r].dataItem.disabled) {
                  cell.style.backgroundColor = ConstantsService.color.disabledBackground;
                  panel.rows[r].isReadOnly = true;
              }
          }
  ....
  
  

  the rows get grayed out and read only as expected. The problem is that if I have vertical scrollbar when I have enough rows when I move it up and down some random rows that had white background get gray (disabled) background. Those rows that supposed to have white background but get gray background are editable.
  
  I logged debug info in itemFormatter to verify that disabled property is false for rows that get gray background. So, this does not appear the problem with the code.

  Why does not cell background stay in place and is moving randomly when I move scrollbar up and down?

  What should I do to prevent that?

  thanks

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 12 December 2018, 9:20 am EST

  I am observing somewhat similar behavior in another grid where cells have check boxes populated through the code. Initially check boxes in in the grid correctly selected. As I scroll grid up and down some cells get checked/unchecked randomly. I have verified that I do not have
  
  events triggered by grid scrolling. I am still looking into it but I want to bring it up as this behavior is oddly similar to the first problem. Please comment on this as well. thanks

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 December 2018, 7:30 pm EST

  The behaviour is observed because FlexGrid recycles and reuses cells.
  
  So we need to remove the style as well where it is not required.
  
  Please refer to the following code snippet;

  itemFormatter = (panel, r, c, cell) => {
          if (panel.cellType === wjcGrid.CellType.Cell) {
              if (panel.rows[r].dataItem.disabled) {
                  cell.style.backgroundColor = ConstantsService.color.disabledBackground;
                  panel.rows[r].isReadOnly = true;
              }else{
                 // clear cells style
                 cell.style.backgroundColor = null;
              }
          }
  

  A better alternative would be to add CSS classes to the cell instead of modifying the style object, since class list gets reset automatically when the cell is recycled, we don’t have to worry about clearing the style.
  
  Please refer to the following code snippet:

  grid.itemFormatter = (panel, r, c, cell)=>{
        if (panel.cellType === wjcGrid.CellType.Cell) {
          if (panel.rows[r].dataItem.disabled) {
            panel.rows[r].isReadOnly = true;
            wjcCore.addClass(cell, 'disabled-cell');
          }
        }
      }
  

  You may also refer to the following sample:
  
  https://stackblitz.com/edit/angular-rb48vt?file=app%2Fapp.component.ts

  As I scroll grid up and down some cells get checked/unchecked randomly
  
  <<<<<<<<<<<<<<
  
  We are unable to replicate the issue at our end, could you please have a look at the above sample and let us know if are missing something to replicate the issue? Also please let us know the wijmo version you are using so that we may test on the same version.

  ~Sharad

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 13 December 2018, 3:39 am EST

  Hello,
  
  I have fixed the first problem using wjcCore.addClass. Thank you so much.

  As for grid with check boxes, I am not using itemFormatter to create check boxes. Instead I am creating them using ng-template. My grid is modeled after https://www.grapecity.com/en/forums/wijmo/header-radio-button and https://stackblitz.com/edit/angular-mwrkdw?file=app%2Fapp.component.ts with the difference that instead of radio buttons I have checkboxes. Notice: it does not have itemFormatter.

  It sounds like I need to use itemFormatter to recreate check boxes to solve random check box selection problem. Is it correct? Do I have to move logic used to populate check boxes from ng-template to itemFormatter to avoid this problem?

  I am using Angular 6.0 with wijmo ^5.20173.409

  thank you

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 13 December 2018, 7:13 am EST

  I tried to pupulate check boxes in formatItem but it did not work.

  I have grid with check boxes. Each row has row header in column 1 that has select all check box. Select all check box is checked when all check boxes in the row are checked. It is unchecked when all check boxes in the row are unchecked. It is indeterminate when at least one check box in the row is checked.

  All row header select all check boxes populated properly initially. As I scroll the grid row header select all check boxes get checked/unchecked randomly. Since check boxes are created in ng-template I am trying to find them using querySelector. Focusing on the first row I am seeing ‘no input’ in the console as I scroll the grid. I tried to create check boxes when no input is found but it is creating too many check boxes in each row expanding the rows.

  Please point out the problem in my code below
  
  flexGrid.formatItem.addHandler((s, e) => {
  
  if (e.panel.cellType === wjcGrid.CellType.Cell) {
  
  if (e.col === 1) { //Row header select all checkbox is in the column 1
  
  const selectedColumnsCount = getSelectedColumnCount(e.row); //Get count of selected checkboxes in the row
  
  const indeterminate = selectedColumnsCount > 0 && selectedColumnsCount < this.flexGrid.columns.length - 2;
  
  const checked = selectedColumnsCount === this.flexGrid.columns.length - 2;
  
  const element = this.flexGrid.cells.getCellElement(e.row, e.col);
  
  const input: HTMLInputElement = element ? element.querySelector(‘input’) as HTMLInputElement : null;
  
  if (input) {
  
  input.checked = checked || indeterminate;
  
  input.indeterminate = indeterminate;

                      if (e.row === 0) {
                          console.log('input.checked ' + input.checked + ' input.indeterminate ' + input.indeterminate);
                      }
                  } else {
                      if (e.row === 0) {
                          console.log('no input'); //I see this log as I scroll the grid
                          //Tried below and it did not work.
                          //const cb = wjcCore.createElement('<input type="checkbox"/>', e.cell);
                          //(cb as HTMLInputElement).checked = checked || indeterminate;
                          //(cb as HTMLInputElement).indeterminate = indeterminate;
                      }
                  }
              }
          }
      });
  

  thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 December 2018, 4:51 pm EST

  Please refer to the following sample and let us know if you still face any issue:
  
  https://stackblitz.com/edit/angular-epzjke?file=app%2Fapp.component.ts

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 14 December 2018, 8:04 am EST

  I took your “using templates” solution and got things working. My problem was that I set checked and indeterminate properties of the row header checkbox in the code during updatedLayout event and that executed once. I understand now that grid recycles the cells on scrolling and those properties need to be set when grid is changing.

  Thank you! It was great help!