Sorting issue for Balance (Number)

Question

Hi Team ,i am using synfusion ejs grid ,i am getting issue of sorting of balance related(number),please find attached file.please send code asap.i am getting code form api like below .I am getting data from api like below.

1.   Address: "NETRA
NIRAMAY NIKETAN VIVEK NAGAR CHAITANYAPUR,(HALDIA) DIST.PURBA,MEDINIPUR INDIA
721645,IN"

2.  
Balance: "8,198.24"

3.   BillingCurrency: "INR"

4.  
BusinessAlias: "4021667"

5.   CCNumber: "CHI6"

6.   CaseId: "Check
LaSCA"

7.   City: "MEDINIPUR"

8.   CollectorName: "SINGH,
ASHISH KUMAR"

9.   CustomerNo: "0001569763"

10. Definer: ""

11. ExtendedName: "Vivekananda
Mission Ashram"

12. IsSensitiveCustomer: ""

13. Name: "VIVEKANANDA
MISSION ASHRAM"

14. NativeAddress: "Netra
Niramay Niketan VIVEK NAGAR,CHAITANYAPUR,,,,,,,,"

15. OpenItems: "1"

16. OrgId: ""

17. PLName: "HEALTHCARE
INDIA - CALCUTTA"

18. ParentSub: "
"

19. PhoneNo: "918049308268
FX:"

20. Ssoid: "000000000"

21. Status1: "Active"

 

 

 

1.   Address: "ELAYAMPALAYAM
(PO),TIRUCHENGODE (TK),NAMAKKAL INDIA 637205,IN"

2.  
Balance: "-108,311.06"

3.   BillingCurrency: "INR"

4.  
BusinessAlias: "2439217"

5.   CCNumber: "CHI8"

6.   CaseId: "Check
LaSCA"

7.   City: "NAMAKKAL"

8.   CollectorName: "M
SHETTY, LOKESH"

9.   CustomerNo: "0001505640"

10. Definer: ""

11. ExtendedName: "VIVEKANANDHA
MEDICAL CARE HOSPITAL"

12. IsSensitiveCustomer: ""

13. Name: "VIVEKANANDHA
MEDICAL CARE HOSPITAL"

14. NativeAddress: "ELAYAMPALAYAM
(PO),,,,,,,,"

15. OpenItems: "3"

16. OrgId: ""

17. PLName: "HEALTHCARE
INDIA - CHENNAI"

18. ParentSub: "
"

19. PhoneNo: "918049308538
FX:"

20. Ssoid: "000000000"

21. Status1: "Active"

 Attachment: Sorting_issue_for_balance_bb697835.zip

Rajapandiyan Settu · Answer

Hi Narsimsetty, 

Greetings from Syncfusion support. 
 
By analyzing your dataSource, we found that you have string value for both the Balance and BusinessAlias fields.  
 
In EJ2 Grid, all the actions like Sorting, Filtering, Grouping etc., are performed with the value as in the dataSource. This is the default behavior Grid. Since you have string type value for Balance and BusinessAlias field So, perform Sorting on these column worked based on string characters. 
 
So, we suggest you to use number value instead of string value for Balance and BusinessAlias field in the dataSource to perform sorting acting as like number. Find the below code and sample for more information. 
 




[app.component.ts] 
    this.data = [ 
      { 
        OrderID: 10248, 
        CustomerID: "VINET", 
        EmployeeID: -1.25, // use the value in number instead of string 
        OrderDate: new Date(8364186e5) 
      }, 
      { 
        OrderID: 10249, 
        CustomerID: "TOMSP", 
        EmployeeID: -108.34, 
        OrderDate: new Date(836505e6) 
      }, 
      ---- 
    ]; 
 
 
Sample: https://stackblitz.com/edit/angular-du181f-jhgg1i?file=app.component.ts 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Narsimsetty Chalamaiah · Answer

Hi Team,As per requirement , In grid should be show like 8,198.24. and sorting for balanceplease send me code for converting string to number,i tried below code for convert string to number like -5311.00but i can't able to get number like -5311.00 parseFloat(this.aadata[0].PaymentAmount.replace(/\$|,/g, ''))-5311parseFloat(this.aadata[0].PaymentAmount.replace(/\$|,/g, '')).toFixed(2)    "-5311.00"i used below code for convert string to number but can't able to get number. for (var i = 0; i < this.aadata.length; i++) {            this.data.push(              {                BankComments: this.aadata[i].BankComments,                BankNo: this.aadata[i].BankNo,                BatchDate: new Date(this.aadata[i].BatchDate),                BatchNo: Number(this.aadata[i].BatchNo),                Currency: this.aadata[i].Currency,                CustomerNo: this.aadata[i].CustomerNo,                               PaymentAmount: parseFloat(this.aadata[i].PaymentAmount.replace(/\$|,/g, '')).toFixed(2),                PaymentAmount1:this.aadata[i].PaymentAmount,                PaymentDate: new Date(this.aadata[i].PaymentDate),                PaymentID: this.aadata[i].PaymentID,                PaymentNo: Number(this.aadata[i].PaymentNo),                PaymentType: this.aadata[i].PaymentType,                PayorName: this.aadata[i].PayorName,                PayorNo: Number(this.aadata[i].PayorNo),              });          }how to convert string to int? like below and should be show with comma in grid.this.data = [       {         OrderID: 10248,         CustomerID: "VINET",         EmployeeID: -1.25, // use the value in number instead of string         OrderDate: new Date(8364186e5)       },       {         OrderID: 10249,         CustomerID: "TOMSP",         EmployeeID: -108.34,         OrderDate: new Date(836505e6)       },       ----     ]; Attachment: Sorting_issue_for_balance_a1240953.zip

Rajapandi Ravi · Answer

Hi Narsimsetty, 

Thanks for the update 

We have analyzed your query and we could see that you like to convert the string to number and like to format the number with commas. Based on your requirement we have prepared a sample and achieved your requirement by using queryCellInfo event of Grid. Please refer the below code example and sample for more information. 





 
queryCellInfo(args) { //queryCellInfo event 
    if(args.column.field === "EmployeeID") { 
      args.data.EmployeeID = parseFloat(args.data.EmployeeID); //convert string to number 
      args.cell.innerText = args.cell.innerText.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); //format the value with commas and it will change in UI level 
    } 
  } 
 

Sample: https://stackblitz.com/edit/angular-du181f-qrzdvj?file=app.component.ts 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo 

Regards,Rajapandi R

Narsimsetty Chalamaiah · Answer

Thanks for update.As per business requirement need to show data with decimal like below.please send code asap.order IDIDDate10249-10,844.347/5/199610250200,000.007/8/199610251-3.007/8/1996Attachment: Sorting_issue_for_balance_f6f36871.zip

Rajapandi Ravi · Answer

Hi Narsimsetty, 

Thanks for the update 

Based on your query we could see that you like to display that number with decimal value. So, based on that we have prepared a sample and we suggest you follow the below way to achieve your requirement. Please refer the below sample and screenshot for more information. 

Sample: https://stackblitz.com/edit/angular-du181f-tzt3an?file=app.component.ts 

Screenshot:  

  

Regards,Rajapandi R

Narsimsetty Chalamaiah · Answer

Hi Team,I have tried below link,As I tested when we click sorting decimal value is not showing , please find below screen shot. As per business requirement when we sorting also should be to show decimal value.https://stackblitz.com/edit/angular-du181f-tzt3an?file=app.component.ts

Rajapandi Ravi · Answer

Hi Narsimsetty, 

Based on your query we could see that you like to display that number with decimal value while sorting. So, based on that we have prepared a sample and we suggest you follow the below way to achieve your requirement. Please refer the below sample and screenshot for more information. 
 




queryCellInfo(args) { 
    if (args.column.field === "EmployeeID") { 
      args.data.EmployeeID = parseFloat(args.data.EmployeeID); 
      var dec = args.cell.innerText.split('.')[1] //if there is no decimal number, we have added the decimal with toFixed() method 
      if ( dec == undefined) { 
        args.cell.innerText = Number(args.cell.innerText).toFixed(2); 
      } 
      else { 
        args.cell.innerText = args.cell.innerText.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); //format the value with commas and it will change in UI level  
      } 
      
    } 
  } 

Sample: https://stackblitz.com/edit/angular-du181f-h2mwwu?file=app.component.ts 

Screenshot: 

  

Regards,Rajapandi R

Narsimsetty Chalamaiah · Answer

Hi Team,Thanks For Update.As per business requirement sorting is working fine of below link.Sample: https://stackblitz.com/edit/angular-du181f-h2mwwu?file=app.component.ts As per Business requirement should be hyperlink of same column and need tooltip of same columns.When I used below code can't able to get hyper link. and not able to get data. please find below screenshtml

e-column>

{{data.EmployeeID}}a> ng-template> e-column> e-column> e-columns> ejs-grid>div>tsimport { Component, OnInit } from "@angular/core";import { orderDetails } from "./data";@Component({ selector: "app-root", templateUrl: "app.component.html"})export class AppComponent { public data: Object[] = []; queryCellInfo(args) { if (args.column.field === "EmployeeID") { args.data.EmployeeID = parseFloat(args.data.EmployeeID); var dec = args.cell.innerText.split(".")[1]; if (dec == undefined) { args.cell.innerText = Number(args.cell.innerText).toFixed(2); } else { args.cell.innerText = args.cell.innerText.replace( /(\d)(?=(\d{3})+(?!\d))/g, "$1," ); //format the value with commas and it will change in UI level } } } ngOnInit(): void { this.data = [ { OrderID: 10248, CustomerID: "VINET", EmployeeID: "-1015264.25", OrderDate: new Date(8364186e5) }, { OrderID: 10249, CustomerID: "TOMSP", EmployeeID: "-10844.34", OrderDate: new Date(836505e6) }, { OrderID: 10250, CustomerID: "HANAR", EmployeeID: "200000.00", OrderDate: new Date(8367642e5) }, { OrderID: 10251, CustomerID: "VICTE", EmployeeID: "-3.00", OrderDate: new Date(8367642e5) } ]; }}if i comment code of querycellinfo, we can able to get hyperlink but not able to sorting properly.please find below screen.if we un comment code of querycellinfo and comment of ng-template sorting is working not able to get hyperlink. please find below screen.Thanks &RegardsChalamaiah N

Shalini Maragathavel · Answer

Hi Narsimshetty, Thanks for the updateBased on your query you are facing issue while rendering the column template in the Grid. For your convenience we have modified your sample as per your requirement. Please refer the below code example and sample for your reference, App.component.html

----------------------------------------------- App.component.ts export class AppComponent { public data: Object[] = []; @ViewChild("tooltip", null) public tooltip: TooltipComponent; customHelper(args) { if(typeof(args.EmployeeID) == "string") { return args.EmployeeID.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); } else { var format = args.EmployeeID.toFixed(2); return format.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); } } beforeRender(args) { this.tooltip.content = args.target.closest("td").innerText; } queryCellInfo(args) { if (args.column.field === "EmployeeID" && typeof(args.data.EmployeeID) == "string") { args.data.EmployeeID = parseFloat(args.data.EmployeeID); } } ngOnInit(): void { this.data = [ ]; } } Sample: https://stackblitz.com/edit/angular-du181f-aes8pi?file=app.component.ts Let us know, If you have any concerns.Regards,Shalini M.

order ID	ID	Date
10249	-10,844.34	7/5/1996
10250	200,000.00	7/8/1996
10251	-3.00	7/8/1996