When using valueAccessor to format user locale, numeric columns are trimming

Question

I use the valueAccessor property to access the column numeric and format it based on the locale, in my example I'm just hardcoding it to en-US, and return it back with the proper format, some how this only works correctly when tabbing trough the columns, but if you use the mouse and click over the column, then edit it with a big number (like 6 or 8 digits) and click over the next column, the data is trimming with a smaller value.

Editing the column (still not moving to the next column with the mouse)

Moving to next column using the mouse click the value is trimed as you see in the next image (tabbing works good)

Nithya Sivaprakasam · Answer

Hi Hiram Hernandez,Greetings from Syncfusion support.Query: When using valueAccessor to format user locale,
numeric columns are trimming.Based on your query, we are unable to replicate “if
you use the mouse and click over the column, then edit it with a big number
(like 6 or 8 digits) and click over the next column, the data is trimming with
a smaller value” at our end so, please share the following details to us
that will help to validate further,
 Share
     the complete grid rendering code.
 Share
     the video demonstration of the issue.
 If
     possible replicate the mentioned issue in the below sample.
 Please share the Syncfusion package version you are
     using.
We have shared the sample and screenshot for your reference.Screenshot:  Sample link:https://stackblitz.com/edit/angular-dmquzc-68wzcm?file=app.component.htmlRegards,Nithya Sivaprakasam.

Hiram Hernandez · Answer

This is the code...

https://stackblitz.com/edit/angular-zknjcu-wvnme9?file=app.component.ts And I attached a video to show how it looks.. :) thank you Attachment: Syncfusion_Grid_Value_Accesor_556835a2.zip

Nithya Sivaprakasam · Answer

Hi Hiram Hernandez,Thanks for your update.Query: Numeric columns are trimming when using
valueAccessor to format user locale.We checked your query with provided sample and analyzed that
the value from unitPrice is return comma separated value when
using click action. So we recommend you to use below code to meet your
requirement.

App.component.ts
   
  this.priceParams = {
        create: () => {
          this.priceElem
  = document.createElement('input');
          return
  this.priceElem;
        },
        read: (args) => {
         
  var unitPrice = args.value;
         
  unitPrice = unitPrice.includes(',')
           
  ? unitPrice.split(',').join('')
           
  : unitPrice;
         
  return unitPrice;
       
  },
        write: (args) => {
          var rowData =
  args.rowData;
   
          var rowIndex =
  this.grid.getRowInfo(args.row).rowIndex;
          this.priceObj =
  new NumericTextBox({
           
  value: args.rowData[args.column.field],
           
  change: function (args) {
             
  var totalCostValue = args.value * rowData['UnitsInStock'];
             
  this.grid.updateCell(rowIndex, 'TotalCost', totalCostValue);
           
  }.bind(this),
          });
         
  this.priceObj.appendTo(this.priceElem);
        },
        destroy: () => {
         
  this.priceObj.destroy();
       },
      };

For your reference, we have provided a sample link below.Sample link: https://stackblitz.com/edit/angular-zknjcu-cvro7k?file=app.component.tsPlease get back to us if you need further assistance.Regards,Nithya Sivaprakasam.