Style active editor

Style active editor

Posted by: bmakhlin on 8 January 2019, 4:58 pm EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 January 2019, 4:58 pm EST

  Hi, I am trying to style flex grid active editor in Angular 6 application.
  
  I listen for keyup event and add/remove cell-invalid style to/from the cell being edited. After adding/removing cell-invalid style i refresh the grid.

  The expected result is edited cell has red border if length of its value is greater than the limit. As characters being removed and length of edited cell value gets less than the limit the border goes away.

  The actual result is if I keep key down the edited cell gets red border. If I keep backspace down and length of the value gets less than the limit the red border goes away.

  The problem is if I release keys typing normally the cell does not retain/show all characters. It only retains last character. So if I type a and type b it would contain b.

  It has to do with calling refresh but if I do not call refresh how do up update active editor border to indicate cell is invalid?

  prepareCellForEdit(s, e) {
          s.activeEditor.addEventListener('keyup', validateClosure);
          const that = this;
          function validateClosure() {
              that.validate(s, e);
          }
      }
  

  
  validate(s, e) {
  ......
  if (this.ValidationErrors) {
                  wjcCore.addClass(e.cell, 'cell-invalid');
              }  else {
                  wjcCore.removeClass(e.cell, 'cell-invalid');
              }
  s.refresh ();
  }
  

  thanks

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2019, 2:06 am EST

  Hi,

  You do need to call refresh() to update the style, the style will be updated by the browser after you add/remove the class from an element.
  
  Also, ‘input’ event would be a better alternative for ‘keyup’ event.
  
  Please refer to the following sample demonstrating the same:
  
  https://stackblitz.com/edit/angular-hnu4td?file=src%2Fapp%2Fapp.component.ts

  ~Sharad