Flex grid lost focus on scrool

Flex grid lost focus on scrool

Posted by: javieragr99 on 21 May 2018, 2:57 pm EST

• 

  javieragr99

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 May 2018, 2:57 pm EST - Updated 3 October 2022, 8:29 pm EST

  I have this strange function, when I select or the cell is focused and I scroll whit mouse wheel , the flex try to jump into the focus, jumping up or down , when the focus is going to hide on top or below the flex,
  
  I think the problem is the itemFormatter , I use itemFormatter for put colors the cells depending his values.

  this is my code using on itemFormatter .

  
  $scope.gridCols.itemFormatter = function (panel, r, c, cell) {
                      if ($scope.vamo == true) {
                          return;
                      }
                      cell.style.textAlign = 'center';
                      cell.style.backgroundColor = "white";
                      if (panel.cellType == wijmo.grid.CellType.Cell) {
                          var value = null;
                          if (cell.childNodes.length > 0) {
                              value = parseFloat(cell.childNodes[0].data);
                          }
  
                          if (panel.grid.columnHeaders.rows[0].allowMerging == false) {
                              panel.grid.columnHeaders.rows[0].allowMerging = true;
                              panel.grid.columnHeaders.rows[0].allowDragging = false;
                          }
                          if (c <= 3) {
                              cell.style.backgroundColor = "#fcfcfc"; cell.style.color = '#000000';return;
                          }
                          if (c >= 4) {
                             
                              if (value == 0) { cell.style.backgroundColor = "#fcffd1"; cell.style.backgroundColor = "#c00000"; cell.style.color = '#f9f9f9'; return; }
                              if (value >0 && value <= 24.9999) { cell.style.backgroundColor = "#fcffd1"; cell.style.backgroundColor = "#c00000"; cell.style.color = '#f9f9f9'; return; }
                              if (value >= 25 && value <= 49.9999) { cell.style.backgroundColor = "#fcffd1"; cell.style.backgroundColor = "#0070c0"; cell.style.color = '#f9f9f9'; return; }//color = 'red';
                              if (value >= 50 && value <= 74.9999) { cell.style.backgroundColor = "#fcffd1"; cell.style.backgroundColor = "#ffc000"; cell.style.color = '#000000'; return; }//color = 'yellow';
                              if (value >= 75 && value <= 99.9999) { cell.style.backgroundColor = "#fcffd1"; cell.style.backgroundColor = "#002060"; cell.style.color = '#f9f9f9'; return; }//color = 'blue';
                              if (value == 100) { cell.style.backgroundColor = "#fcffd1"; cell.style.backgroundColor = "#006600"; cell.style.color = '#f9f9f9'; return; } //color = 'green';
                              if (value > 100) { cell.style.backgroundColor = "#02ffb3"; cell.style.backgroundColor = "02ffb3"; cell.style.color = '#f9f9f9'; return; }
                              cell.style.backgroundColor = "#000000"; cell.style.backgroundColor = "#000000"; cell.style.color = '#000000'; return;
  
                          }
  
  
                      }
                  }
  
  

  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 May 2018, 2:09 am EST

  Hi,
  
  Please try to change the background color using itemFormatter in following approach:

  $scope.itemFormatter=function(panel,r,c,cell){
  	if(panel.cellType==1){
  		var color="";
  		if(/* some conditon*/){
  			color="red";
  		}
  		cell.style.backgroundColor=color;
  	}
  }
  

  ~Manish

• 

  javieragr99

  • Post Options:
  • Link
    Copy

  Posted 22 May 2018, 1:15 pm EST

  Now I have my code like this but is the same , the bug continue…

  
  $scope.gridCols.itemFormatter = function (panel, r, c, cell) {
                     
                      cell.style.textAlign = 'center';
                      cell.style.backgroundColor = "white";
                      if (panel.cellType == 1) {
                          var value = null;
                          if (cell.childNodes.length > 0) {
                              value = parseFloat(cell.childNodes[0].data);
                          }
                          if (panel.grid.columnHeaders.rows[0].allowMerging == false) {
                              panel.grid.columnHeaders.rows[0].allowMerging = true;
                              panel.grid.columnHeaders.rows[0].allowDragging = false;
                          }
                          var backgroundColor = '#000000', color = '#000000';
                          if (c <= 3) {
                              backgroundColor = "#fcfcfc"; color = '#000000';
                          }
                         
                          if (c >= 4) {                           
                              if (value == 0) { backgroundColor = "#c00000"; color = '#f9f9f9';  }//red
                              if (value >0 && value <= 24.9999) {  backgroundColor = "#c00000"; color = '#f9f9f9';  }//red
                              if (value >= 25 && value <= 49.9999) {  backgroundColor = "#0070c0"; color = '#f9f9f9'; }//color = 'clearBlue';
                              if (value >= 50 && value <= 74.9999) { backgroundColor = "#ffc000"; color = '#000000';  }//color = 'yellow';
                              if (value >= 75 && value <= 99.9999) { backgroundColor = "#002060"; color = '#f9f9f9';  }//color = 'blue';
                              if (value == 100) {  backgroundColor = "#006600"; color = '#f9f9f9';  } //color = 'green';
                              if (value > 100) { backgroundColor = "#02ffb3";  color = '#f9f9f9'; } //greenBlue
                              if (value == null) { backgroundColor = "#000000"; color = '#000000'; } //black
                              //set the color
                              cell.style.backgroundColor = backgroundColor; cell.style.color = color;
  
                          }
  
  
                      }
                  }
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 May 2018, 4:22 am EST

  Hi,
  
  We are sorry, we are unable to replicate the issue at our end with the build 5.20181.462.
  
  Please find the demo fiddle for the same.
  
  http://jsfiddle.net/QNb9X/921/

  If the issue persists, please modify the sample.

  ~Manish

• 

  javieragr99

  • Post Options:
  • Link
    Copy

  Posted 23 May 2018, 11:22 am EST

  Hi, I foud the bug, is the frozen-column
  
  this is the fidle, just focus the cell and then scrool with the scroll well
  
  http://jsfiddle.net/javieragr/r8cp9uh5/1/

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 9:43 am EST

  Hi,
  
  Thanks for the modified sample.
  
  By setring ‘cloneFrozenCells’ property to true, it should work.
  
  Here is the updated fiddle:- http://jsfiddle.net/r8cp9uh5/3/

  ~Manish

• 

  javieragr99

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 1:54 pm EST

  The bug persist adding cloneFrozenCells to true on the fiddle. check it

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 May 2018, 7:36 am EST

  Hi,
  
  We are sorry indeed, we are unable to replicate the issue at our end with the above fiddle.
  
  Please share information for your browser, OS so that we may test on the same environment.

  ~Manish

• 

  javieragr99

  • Post Options:
  • Link
    Copy

  Posted 25 May 2018, 11:35 am EST - Updated 3 October 2022, 8:29 pm EST

  Im using chrome in the last version and windows 7
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2018, 4:54 am EST

  Hi,
  
  The culprit here is the following ‘transition’ CSS, removing the transition CSS should fix the issue:-

  .wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected {
          border: 2px solid orange;
  	transition: all 0ms !important; 
      }
  

  Here is the link to updated fiddle:- http://jsfiddle.net/r8cp9uh5/4/

  ~Manish

• 

  javieragr99

  • Post Options:
  • Link
    Copy

  Posted 28 May 2018, 11:37 am EST

  Hi, the link doesn’t work , but modifying the transition time It works really good, thank´s
  
  Manish you are very helpful