Hi Infragistics,
I am trying to create a grid with a date column that can be conditionally colored depending on a user date format setting. I am currently defining the column's conditional with a template and it works fine for most date formats. However for three particular date formats the conditions from the template are not applied.
This is an example of the template with conditions:
{{if new Date(${fldDate}.replace(/-/g, '/')).setHours(0,0,0,0)>=new Date(1262304000000).setHours(0,0,0,0) && new Date(${fldDate}.replace(/-/g, '/')).setHours(0,0,0,0)<=new Date(1293840000000).setHours(0,0,0,0)}}<div style="height:100%;background-color:Red;">${fldDate}</div>{{elseif new Date(${fldDate}.replace(/-/g, '/')).setHours(0,0,0,0)>=new Date(1293926400000).setHours(0,0,0,0) && new Date(${fldDate}.replace(/-/g, '/')).setHours(0,0,0,0)<=new Date(1325376000000).setHours(0,0,0,0)}}<div style="height:100%;background-color:LawnGreen;">${fldDate}</div>{{elseif new Date(${fldDate}.replace(/-/g, '/')).setHours(0,0,0,0)>=new Date(1325462400000).setHours(0,0,0,0)}}<div style="height:100%;background-color:Aqua;">${fldDate}</div>{{else}}<div style="height:100%;background-color:Transparent;">${fldDate}</div>{{/if}}
Here we have three conditions. Two with closed interval, one with an open interval, and then a final statement if no of the three conditions match.
This template works fine for most of the date formats I have tried except for:
- dd-MMM-yyyy
- dd-MMM-yy
- dd/MMM/yyyy
Any ideas?
The following date formats work just fine:
- yyyy-MMM-dd
- yyyy-MM-dd
- dd-MM-yyyy
- yyyy/MMM/dd
- yyyy/MM/dd
- dd/MM/yyyy
Best Regards
Fredrik
Hello Fredrik,
I am just following up and see if you have any questions.
I assume that in your data source the date values are in proper format allowing the grid to store them as Date objects without issues. What happens afterwards is that the Date object is passed through the $.ig.formatter function defined in the infragistics.util.js file. It creates a string following the specified format by using the various Date methods that return separate parts of the date (years, months, days, etc.). This string is what then reaches the templating engine. So when the format cannot be used directly in IE to create a Date object from, you'll have to parse it and then reassemble the string to be consumable by IE. There can be various ways to do this. What I tried is the following:
1. From your template cut the ${fldDate}.replace(/-/g, '/') parts and replace them with a variable which will be assigned on runtime based on the format.
2. For all formats that you determined to work in IE, you can just use "${fldDate}.replace(/-/g, '/')" for the variable's value
3. For the other formats, based on the format itself assign it a template that can parse the format to something consumable by IE. For example:
The format "dd/MMM/yyyy" can be translated to the IE consumable "yyyy/MMM/dd" by swapping the dd and yyyy places which can be done with the following:
"${fldDate}.match(/[0-9]{4}/)[0] + '/' + ${fldDate}.match(/[a-zA-Z]{3}/)[0] + '/' + ${fldDate}.match(/[0-9]{2}/)[0]"
I am not a specialist on regular expressions and there can be a better way to change the format in the template but this seems to work.
I hope this information will help you with the other problematic formats. Please, let me know if you have other questions or concerns!
Best regards,
Stamen Stoychev
I get that it falls back to the final else and hence uses the blank background statement. What I do not get is how the dates show on the correct format in the grid in IE if they are invalid to start with? If IE cannot generate a valid Date object in JS then it should not be able to show the date at all? Or am I missing something?
Hi,
The whole point is to let the user decide which date format he/she wants to use.
How can IE display the date format the correct way but cannot color it the correct way?
Best regards
You may re-format the date column to a format which IE accepts as valid. You may include the reformatted dates in the grid as a hidden date column of which may be referenced in the conditional template.
If you have any questions, please let me know as well.