We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Permitted values for format option

Thread ID:

Created:

Updated:

Platform:

Replies:

118555 Mar 18,2015 10:37 AM Mar 25,2015 09:39 AM JavaScript 6
loading
Tags: ejGrid
Irvin Dominin
Asked On March 18, 2015 10:37 AM

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 [Syncfusion]
Replied On March 19, 2015 09:56 AM

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
Replied On March 19, 2015 10:28 AM

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
Replied On March 19, 2015 11:13 AM

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 [Syncfusion]
Replied On March 20, 2015 12:17 PM

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
Replied On March 24, 2015 07:13 AM

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 [Syncfusion]
Replied On March 25, 2015 09:39 AM

Hi Irvin,

Thanks for the update.

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

Regards,

Balaji Marimuthu


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;