Hot to change the value to empty

Hot to change the value to empty

Posted by: bzhang on 16 February 2023, 7:11 am EST

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 16 February 2023, 7:11 am EST

  Hi,
  
  I am using angular 9 and the Wijmo version is 5.20202.699
  
  Here is part of the code

  <wj-flex-grid #flex [selectionMode]=“‘Row’” [itemsSource]=“data” [frozenColumns]=“1” [headersVisibility]=“‘All’” [ngStyle]=“{‘height’: flexHeight}”(cellEditEnded)=“onCellEditEnded($event)”>
  
  <wj-flex-grid-column header=“‘Product #’” [binding]=“‘productId’ [name]=”‘productId’" [width]=“175” [isReadOnly]=“false”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  

  
  
  <input type=“text” [(ngModel)]=“cell.value” style=“width: 100%”/>
  
  

  
  
  

  
  
  

  
  
  
  
  …
  
  
  
  

  
  
  

  
  
  
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell”>
  
  <div [ngClass]=“columnClass(cell.item)”>{{cell.item.productId}}
  
  
  
  
  
  

  The issue right now I am facing is when the user key in the column Product # the value will change as expected. When the user deletes the input field and deletes all digits of the value the column does not change as expected.
  
  For example, if I type P1111, the value becomes P1111. Then I double-click the column and delete 2 digits of the value and it changes to P11. Then, I delete all digits of P11, and when I leave the edit mode, the value stays P11.

  My question now is what should I do to let it be able to delete all digits and clear the value for the user to operate by keyboard?

  Thank you
  
  Bob

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 16 February 2023, 7:13 am EST

  I found that the code lost some tags.
  
  Here is the code again.

  <wj-flex-grid #flex [selectionMode]=“‘Row’” [itemsSource]=“data” [frozenColumns]=“1” [headersVisibility]=“‘All’” [ngStyle]=“{‘height’: flexHeight}”(cellEditEnded)=“onCellEditEnded($event)”>

  <wj-flex-grid-column header=“‘Product #’” [binding]=“‘productId’ [name]=”‘productId’" [width]=“175” [isReadOnly]=“false”>

  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>

  <input type=“text” [(ngModel)]=“cell.value” style=“width: 100%”/>

  {{cell.item.productId}}
• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 16 February 2023, 7:15 am EST

  <wj-flex-grid #flex [selectionMode]=“‘Row’” [itemsSource]=“data” [frozenColumns]=“1” [headersVisibility]=“‘All’” [ngStyle]=“{‘height’: flexHeight}”(cellEditEnded)=“onCellEditEnded($event)”>

  <wj-flex-grid-column header=“‘Product #’” [binding]=“‘productId’ [name]=”‘productId’" [width]=“175” [isReadOnly]=“false”>

  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>

  ...

  [code][/code]
• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 16 February 2023, 7:16 am EST

  Can you see the code? I have posted it many times. It always lost some parts of the codes.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 February 2023, 11:33 pm EST

  Hi,
  
  We are unable to replicate the issue on our side. However, the described behavior comes when isRequired property of column is set to true. So, if you are setting the isRequired property to true for Product column in the code then this behavior will come and if you set it to false in the template itself then, the user may delete the value from cell in Product column. I have attached a sample explaining this behavior. You may observe the same by toggling the checkbox placed below the grid.
  
  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/E5TDUZUFKkuEFOLyIGn_-A/

  PS: The column except the string is set to isRequired to true. So in case the column binding is numeric type. This issue may occur.

  Regards,
  
  Manish Gupta