Our blazing fast Grid component built with pure JavaScript


Post by Webethics »

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


Post by mats »

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 : [...] }

Post by Webethics »

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


Post by mats »

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.


Post Reply