Our blazing fast Grid component built with pure JavaScript
As I have checked I have configured data with columns correctly. Also, I have set the date-time format according to my requirement.
I have added a sample test code. Please have a look at it.
new Grid({
appendTo : 'container',
minHeight : '20em',
columns : [
{
text : 'Date',
field : 'start',
flex : 1,
type : 'date',
format : 'DD.MM.YYYY HH:mm',
editor : {type : 'datetimefield'},
renderer : ({ record = ''}) => {
return DateHelper.format(DateHelper.parse(record['start'],'DD.MM.YYYY HH:mm'),'DD.MM.YYYY HH:mm') || 'N/A';
}
}
],
data : [
{start : "21.02.2021 05:00"},
{start : ""},
]
});
Error screenshot when editing the first column.
https://prnt.sc/11fj5pk
You don't seem to have added date field to your model. Try doing this first, which should give you the value correctly inside the renderer too.
store : {
fields : [
{ type : 'date', name : 'start', format : 'YOUR FORMAT'}
],
data : [...]
}
Thanks for your support.
I have done my work with the help of you.
But there is one issue in the above code and the issue is after editing the value which has an empty value the updated value is not displayed in the grid.
Screenshot : https://prnt.sc/11fx223
new Grid({
appendTo : 'container',
minHeight : '20em',
columns : [
{
text : 'Date',
fields : [{ type : 'date', name : 'start', format : 'YOUR FORMAT'}],
flex : 1,
type : 'date',
format : 'DD.MM.YYYY HH:mm',
editor : {type : 'datetimefield'},
renderer : ({ record = ''}) => {
return DateHelper.format(DateHelper.parse(record['start'],'DD.MM.YYYY HH:mm'),'DD.MM.YYYY HH:mm') || 'N/A';
}
}
],
data : [{start : "21.02.2021 05:00"},{start : ""},]
});
Thanks
I don't see the code I told you to add in your code snippet? Please try what I wrote then we'll see if that fixes it.