Permitted values for format option

[Irvin Dominin]

Good morning,

I need to know what are the supported values that can be set in the format option of the grid column ( {0:...} )

My requirement is to display some data in the grid in various formats

eg. 

display a number with a defined number of integer and decimal places like 10.000,50 that is coming from the datasource as 10000.5

display a time like 10:28 that is coming from the datasource as 1028

display a period like 02/09 that is coming from the datasource as 209

display a period like 10/2015 that is coming from the datasource as 102015

Kind regards,

Irvin Dominin

[Balaji Marimuthu]

Hi Irvin,

Thanks for using Syncfusion Products.

Based on your requirement we have created the sample.

Sample: forum118555.zip

Please find the response for your queries.

I need to know what are the supported values that can be set in the format option of the grid column ( {0:...} ) My requirement is to display some data in the grid in various formats	We have used the Globalize format in our Grid. So all Globalize scripts supports format will be supported in our Grid. Please find the below code snippet for various formats in Grid. $("#Grid").ejGrid({ dataSource: window.details, columns: [ { field: "Number", format: "{0:n2}", textAlign: ej.TextAlign.Right, width: 110 }, { field: "Currency", format: "{0:c2}", textAlign: ej.TextAlign.Right, width: 110 }, { field: "Date", format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right, width: 110 } ] }); Please refer the online demo in following link. http://js.syncfusion.com/demos/web/#!/azure/grid/columns
display a number with a defined number of integer and decimal places like 10.000,50 that is coming from the datasource as 10000.5	Your requirement is achieved by using the “locale” property in Grid. And also please refer the following script files in your application. <script src="external/jquery.globalize.js"></script> <script src="scripts/globalize.culture.de-DE.min.js"></script> Please find the below code snippet. $("#Grid").ejGrid({ dataSource: window.gridData, locale: "de-DE", columns: [ { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right }, { field: "Freight", width: 75, format: "{0:N2}", textAlign: ej.TextAlign.Right }, ] });
display a time like 10:28 that is coming from the datasource as 1028 display a period like 10/2015 that is coming from the datasource as 102015 display a period like 10/2015 that is coming from the datasource as 102015	For your kind information, the mentioned format have not supported in the Globalize format if the datasource value as numeric like you mentioned. So we have achieved by using the “column template” in Grid and the format applied by using the jsrender. Please find the below code snippet. <script type="text/template" id="template"> {{>~TimeFormat(Time)}} </script> <script type="text/template" id="template1"> {{>~DateFormat(date.toString())}} </script> <script type="text/template" id="template2"> {{>~Format(Employee.toString())}} </script> <script type="text/javascript"> $.views.helpers({ TimeFormat: function (val) { str = val.toString(); arr = str.split(''); newStr = arr[0] + arr[1] + ":" + arr[2] + arr[3]; return newStr; } }); $.views.helpers({ DateFormat: function (args) { arr = args.split(''); newStr = arr[0] + arr[1] + "/" + arr[2] + arr[3] + arr[4] + arr[5]; return newStr; } }); $.views.helpers({ Format: function (str) { arr = str.split(''); newStr ="0"+ arr[0]+ "/"+ arr[1] + arr[2]; return newStr; } }); $(function () { // the datasource "window.gridData" is referred from jsondata.min.js $("#Grid").ejGrid({ dataSource: window.gridData, locale: "de-DE", allowPaging: true, allowSorting: true, columns: [ { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right }, { headerText: "Display time", template: true, templateID: "#template", width: 80 }, { headerText: "Display year", template: true, templateID: "#template1", width: 80 }, { headerText: "Display date", template: true, templateID: "#template2", width: 80 }, { field: "Freight", width: 75, format: "{0:N2}", textAlign: ej.TextAlign.Right }, { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right }, { field: "ShipCity", headerText: "Ship City", width: 110 } ] }); }); </script>

Please let us know If you have any queries.

Regards,

Balaji Marimuthu

[Irvin Dominin]

Hi Balaji,

thanks for the answer.

For the custom formatter using template how are filter and sort handled using local datasource? In the case of periods I need to sort them as periods (year than month or month than day) how can I handle this?

Looking the demo I see in the Conditional Formatting sample that use another method (queryCellInfo). What is the best approach?

Kind regards,

Irvin Dominin

[Irvin Dominin]

Hi Balaji,

just an add, I need a generic function in order to handle these format in general so I can't refer a specif column in the template like:

{{>~TimeFormat(Time)}}

but more in general:

{{>~TimeFormat(<cellcontent>)}}

Is this possibile?

Kind regards,

Irvin Dominin

[Prasanna Kumar Viswanathan]

Hi Irvin,

Thanks for the update,

Query 1 : “What is the best approach?”

If we use queryCellInfo method the performance will be low. So in previous response we suggest you to use column template. But in column template we unable to perform the sorting, filtering operations. So we suggest you the queryCellInfo method.

In ejGrid when we enable sorting it will defaultly sort according to the column data type in column. So, we need not to handle anything externally.

Query 2 : “{{>~TimeFormat(<cellcontent>)}}”

In column template we have to specify template for each column is to be render as column template. So, we unable to specify as a generic one

If we misunderstand any queries, please kindly get back to us we will be happy to assist you,

Regards,

Prasanna Kumar N.S.V

[Irvin Dominin]

Hi Prasanna Kumar,

I ended up on a mix solution: 

• for number and date I use format option
• for time and period I use queryCellInfo method

I'll try with thousands of rows, I hope performance will be good.

Kind regards,

Irvin Dominin

[Balaji Marimuthu]

Hi Irvin,

Thanks for the update.

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

Regards,

Balaji Marimuthu