Changing text color of edited rows in wijmo grid

Changing text color of edited rows in wijmo grid

Posted by: technical.store.technical on 16 June 2021, 3:39 am EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 16 June 2021, 3:39 am EST

  Hi,

  I’m facing following issue -

  1. On editing any cell, i want to show green color for the row been edited.
     
     Added the code for that - lines (161 -163) and similar code for other cells as well.
     
     This code is changing the color but the dropdown of that particular cell is getting stuck.

  example - On editing 4th , changing the section from ‘D’ to ‘A,D’ then color is getting changed but dropdown is stuck. (i’m not clear why this happening).

  2. How can I have different color for different operation like ADD/Editing:
     • On adding a row i want the color of that row to be different then for editing. How can i achieve this ? (code for adding new user is present in the sample). (color change is also not working for Full Name Column as well. )

  Also the color should persist even after i do pagination.

  Snippet of the above example -
  
  https://stackblitz.com/edit/angular-bhwhzq?file=src/app/app.component.ts
  
  Please provide solution.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 17 June 2021, 12:12 am EST

  Hi team,

  Can you please provide solution.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 June 2021, 7:59 am EST

  Hi,

  The observed issue is expected. It is arising because setting the row’s cssClass triggers rerendering which results in redrawing of the cell, and ultimately rerendering the multi select due to which the dropdown of the previous multiselect gets stuck. I’ve updated the sample to fix the issue, please refer to the following sample and let us know if you face any issues:
  
  https://stackblitz.com/edit/angular-gmpnet?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 17 June 2021, 8:53 am EST

  Hi Sharad,

  It is still not working for full Name column. On editing Full name change is not triggering.
  
  Please look into this.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 June 2021, 4:21 am EST

  This is because, we our adding our custom class only when edits are performed using our custom multiselect editor, for default editors, we handle handle the cellEditEnded event. You may refer to the following code snippet and the updated sample :

   grid.cellEditEnded.addHandler((s, e) => {
        let row = e.getRow();
        this.applyEditClass(grid, row);
      });
  

  https://stackblitz.com/edit/angular-gmpnet?file=src%2Fapp%2Fapp.component.ts

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 21 June 2021, 1:33 am EST

  Hi Sharad,

  Thank you for responding.
  
  While implementing the above solution I’m facing an issue. I’ve added a delete button above in the above snippet and when any row is deleted it’s cssClass is set to red color( i.e. the-del class).
  
  But now when I add a new row its color is changing to the required color but after doing pagination it changes to a different color( that is the cssClass of delete button).

  Example -
  
  Add a new row, Fill the fields and do pagination, then after returning to the same page of newly added row, its color is changed to red.

  Color convention that I’ve followed in the snippet is:
  
  Deleted row color = Red
  
  Edited row color = Green
  
  Newly added row = greenyellow

  Also the dropdown of newly added row is changed to greenyellow. How to apply color to only text of the row and not on the associated cell collection?
  
  And the font-style applied to the newly added row is not getting applied on the combo’s and multi-select?

  Snippet of the above example -
  
  https://stackblitz.com/edit/angular-3zpreu?file=src/app/app.component.ts

  Please help us with the solution.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 22 June 2021, 1:39 am EST

  Hi Sharad,

  Can you please provide solution for the above issue.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 4:52 am EST

  Hi Team,

  Can you please provide solution for the above issue.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 6:29 am EST

  Sorry for the delay, the issue in the sample is arising, because in the loaded rows event you were setting the delete class to the items. Following code was causing the issue

  grid.loadedRows.addHandler((s, e) => {
        s.rows.forEach(r => {
         if (r.dataItem._isColor) {
            r.cssClass = this.cssClassDelete;
          }
         });
      });
  

  I’ve updated the sample to fix the issue, please refer to the following sample:
  
  https://stackblitz.com/edit/angular-u3vedj?file=src/app/app.component.ts

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 8:32 am EST

  Hi Sharad,

  Thank you for replying.
  
  I’m still have issues in the above snippet: -

  1. If I click on the Full name Column and then click on any other cell, then without any change in the full name cell , the green color is getting applied to the row.
     
     (Refer Lines - 192- 195 , 478-498 in ts file) (we have requirement for this type of click).

  2. The dropdown List of the edited/deleted/newlyAdded is getting colored too. How can i avoid this?

  Snippet of the above code -
  
  https://stackblitz.com/edit/angular-fzuymg?file=src/app/app.component.ts
  
  Please provide solution.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 June 2021, 3:41 am EST

  1). The issue in the sample is arising because cell is edited on click event, if you need to apply changes only if value is changed then inside the cellEditEnded handler you may compare the old and the new values before applying the font color:

  grid.cellEditEnded.addHandler((s, e) => {
        let row = e.getRow();
        let oldValue = e.data,
          newValue = s.getCellData(e.row, e.col);
        if (oldValue !== newValue) {
          this.applyEditClass(grid, row);
        }
      });
  

  2). This is because drowdown copies it CSS style like font color, back color etc from the main control, if you need to avoid it, you may use the following CSS:

  .wj-dropdown-panel {
    color: #000 !important;
  }
  

  Update sample demonstrating the above-mentioned changes:
  
  https://stackblitz.com/edit/angular-tsnitk?file=src%2Fstyles.css