Format Number for Grid cells inside Javascript

[NAVEEN RAAJU]

I am unable to format numbers for Grid cell values in Java script.  I searched various forums but could not find anything.  I use the below code to format datetime .

        var intl = new ej.base.Internationalization();
        var dFormatter = intl.getDateFormat({
            format : 'MMM dd,yyyy HH:mm',
            type : 'dateTime'
        });
        var formattedString = dFormatter(new Date(args.value));

I need to format a number using format : '00#########' inside a javascript . Please let me know how to do it.

[Ajith Govarthan]

Hi NAVEEN, 

 

Thanks for contacting Syncfusion support. 

 

Based on your you want to format the number and date values in the grid component. Before we proceed to your query, we need more details on your requirement so please share the below details to validate further on your requirement. 

 

1. Share complete grid code example

 

2. Please let us know that you want to apply number and date format while editing the records.

 

3. Share the screenshot of your requirement.

 

4. Share the Syncfusion package version.

 

Regards, 

Ajith G. 

[NAVEEN RAAJU]

Sorry for not providing much details.  We have a column called 'CSI' of type numeric and format of this column set to '00#########'.  This column needs a template to add a Javascript click event . So within the template, the column value for CSI is not properly formatted with '00#########'.  The leading zeros does not appear .

I have attached the zip file . Please run MyProfile_Cares_EJ2Grid.html to reflect the issue.

Attachment: Cares_DataTableStatic_ca413863.zip

[Vignesh Sivagnanam]

Hi Naveen, 

Thanks for the update 

Based on your update we found that you want to apply the format to the column template. You can apply the format to the column template in the grid using the custom function. Please refer the below Code snippet and sample for your reference 

Code Example : 

import { Internationalization } from "@syncfusion/ej2-base"; 

let instance: Internationalization = new Internationalization(); 

………. 

(window as DateFormat).format = (value: Number) => { 

  return instance.formatNumber(value, { format: "00#########" }); 

}; 

interface DateFormat extends Window { 

  format?: Function; 

} 

……… 

……… 

{ 

      field: "CSI", 

      template: "<div>${format(Freight)}</div>", 

      headerText: "CSI", 

      type: "number", 

      width: 130 

    }, 

Sample:  https://stackblitz.com/edit/t79scs-1re5hr?file=index.ts 

Regards, 

Vignesh Sivagnanam 

[NAVEEN RAAJU]

Thanks much for your quick assistance. Its working fine now.

[Vignesh Sivagnanam]

Hi Naveen,  

We are happy to hear that the provided solution works fine at your end.  

Please get back to us if you need any further assistance.  

Regards,  

Vignesh Sivagnanam