Format a strring as a number with a comma as a 1000's seperator

[William Morgenweck]

I have a datasource that is coming form an Excel Spreadsheet that has a number column formatted as text.  I would like the grid to format the column as 1,333,456 with no decimal and still have the column have the ability to sort as it was a number.  Is this possible? 

[Sujith Kumar Rajkumar]

Hi William, 

 

Greetings from Syncfusion support. 

 

Based on the query we would like to let you know that the Grid actions like, Sort, Filter, etc., are performed on the underlying data source value field. So if string value is present in the column it will be considered as string data type column and the sort action will be performed accordingly. And so it will not work properly for sorting number values in your scenario as they are provided in string format and so it will processed as string data type. So to resolve this problem, we suggest you to define the number column values in number format in the Grid’s data source. 

 

If you are unable to update the value to number format in the returned data, then we suggest you to achieve this by updating the corresponding column field in the Grid data source to number format by using the queryCellInfo event handler(triggers for each Grid cell). This is demonstrated in the below code snippet, 

 

// Grid’s queryCellInfo event handler 

onQueryCellInfo: function (args) { 

    // Check if the event is triggered for the required column 

    if (args.column.field === "Freight") { 

        // Convert the ‘Freight’ column value to number format and assign it to the row data 

        args.data.Freight = parseInt(args.data.Freight); 

    } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-gkkxs?file=/src/App.vue 

 

Column type documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-type 

 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/#querycellinfo 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[William Morgenweck]

I totally appreciate your reply and your code but how would I get the converted integer to show with comma separated 1000's?  No dollar sign just 1,123,456 and no decimals 

[William Morgenweck]

Not sure why -- but my app started putting in the comma after I put in format = "N"  but your sample does not have the comma.  strange

[Sujith Kumar Rajkumar]

Hi William, 

 

We checked the problem and would like to let you know that it is occurring because the column data type is considered as ‘string’ due to its initial data source value. You can resolve this problem by setting the column ‘type’ as ’number’ as demonstrated in the below code snippet, 

 

<e-column  field="Freight" type="number"  format="N”></e-column> 

  

Please find the below modified sample for reference, 

 

Sample: https://codesandbox.io/s/vue-forked-45n58?file=/src/App.vue 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R