Delete feature in Wijmo Grid

Delete feature in Wijmo Grid

Posted by: technical.store.technical on 12 July 2021, 7:02 am EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 12 July 2021, 7:02 am EST

  Hi team,

  We want to remove a newly added row from the collectionView , when we click on delete button. But after removing this row, color highlighting is not working for the existing deleted row.

  Steps

  1. add a new row. select that row.
  2. select existing two rows.
  3. click on delete.

  the new row gets deleted but existing two rows are not getting highlighted with red color, for that we have to explicitly uncheck the row.
  
  How to fix this issue ?

  Snippet of above sample : -
  
  https://stackblitz.com/edit/angular-u6wtuv?file=src/app/app.component.ts

  deleteUser() {
      this.selectedItems = this.getSelectedRows(this.grid);
      const view = this.grid.collectionView as wjcCore.CollectionView;
      this.selectedItems.forEach(row => {
        if (row.isSelected) {
          if (row.dataItem.id === 1000) {
            view.remove(row.dataItem);
          }
          row.dataItem._isColor = true; 
          row.dataItem._cssClass = this.cssClassDelete;
        }
        row.isSelected = false;
      });
      this.grid.invalidate();
    }
  

  Please help us with the solution.
  
  Thank you.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 July 2021, 3:15 am EST

  Hi,
  
  This issue is because of the applied CSS for color as black when the multiple cells are selected. For this case, we need to remove the color property for “.wj-cells .wj-cell.wj-state-multi-selected, .wj-state-selected” class.

  Please refer to the updated sample: https://stackblitz.com/edit/angular-pewqaa?file=src%2Fstyles.css

  Regards,
  
  Manish Gupta

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 13 July 2021, 3:45 am EST

  Hi Manish,

  In our snippet, the only issue is with the checked checkbox.
  
  If you select existing two rows and click on delete, the checkboxes gets unchecked and highlighted color appears.
  
  But this unchecking of checkbox doesn’t work if you have a combination of new row and existing rows.
  
  Please provide solution to uncheck the checkbox on delete button click so that the row will get highlighted automatically.
  
  Snippet of our sample :-
  
  https://stackblitz.com/edit/angular-u6wtuv?file=src/app/app.component.ts

  Regards,

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 14 July 2021, 7:16 am EST

  Hi team,

  Can you help us the solution.

  Regards

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 July 2021, 8:32 am EST

  Hi,

  We were able to replicate the issue, this issue was occurring because when we were trying to remove the data from the collectionView at the beginning itself, the grid implicitly refreshes itself, which causes the next iteration to remain selected.
  
  To resolve it, We may iterate through rows of FlexGrid in reverse order i.e. from bottom to top, so that we may un-check all the data rows, and then we may remove the newly added row at the end so that implicit refreshing will not affect our code.

  Sample: https://stackblitz.com/edit/angular-tnc7qf?file=src/app/app.component.ts

  Regards,
  
  Manish Gupta