Hi Arunava,

Thank you for reaching out!

I have been looking into your question and tested entering an empty value in the “Order Date” column of type ‘date’ in this demo from our documentation. On my side, an empty date value is accepted by the IgxGrid and no errors are observed.

Could you please test the demo on your side as well an tell me if the reported behavior is reproduced? In case it is, please provide the steps you performed.

In case it is not, this will indicate that the issue is most probably local to your own project. What I can suggest, then, would be to fork and modify the documentation demo, trying to reproduce the issue there and sending it back to me, so I can investigate it.

Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case. Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

Thank you for your cooperation. 

Looking forward to hearing from you.

Best regards,
Bozhidara Pachilova
Associate Software Developer

https://stackblitz.com/edit/angular-el6btg-74xxxm?file=src%2Fapp%2Fgrid%2Fgrid-column-data-types-sample%2Fgrid-column-data-types-sample.component.ts

I changed OrderDate to '' i get an error

empty string is not handled in this part of the code.

Please, note that the code that you are referring to is part of Angular’s Common module. You can view the file in GitHub here. This function is itself called by the Angular DatePipe, respectively the formatDate method (source code here).

These methods are used by the grid for columns of type ‘date’. The formatting in the grid only adds coalescing to an empty string in case the value is ‘null’ or ‘undefined’ to the default functionality, so that explains the observed behavior, mentioned in my previous message. When deleting the value of a ‘date’ cell, it remains empty. However, the underlying value is ‘undefined’, which is handled by the DatePipe internally.

For the case of an empty string, though, by going through the toDate method code, you could confirm as to why it is not accepted as a valid date: firstly, it is not an ISO string representing date and secondly, Javascript’s Date function does not parse it. When attempting to declare new Date(‘’) the result is “Invalid Date”. Also Date.parse('') results in 'NaN'.

In conclusion, this would not be considered a bug in this case. Having the column’s type set to ‘date’ and then binding a string value is expected to cause errors.

Nevertheless, in case your original data source does come with empty strings as date values, what I can suggest is the following 'workaround'. It consists of simply setting the date fields values to ‘null’, in case they are initially equal to ‘’:

  public ngOnInit(): void {
    this.data.forEach((d) => {
      if (d.OrderDate === '') {
        d.OrderDate = null;
      }
    });
  }

Here is a modified version of the demo, where the first two data entries are defined as ‘’, and this approach is adopted.

Please, let me know if you need any further assistance on the matter.

Best regards,
Bozhidara Pachilova
Associate Software Developer

The fix has made it into the latest patches for the corresponding versions it targets -13.2.11, 14.0.12. For a complete list of our Releases history, please check out this page in GitHub.

Regarding your second question, Angular’s DatePipe was directly used in previous versions. It is still used for the date cell value in the cell component’s template. The error you observed stemmed from the cell’s title property getter, which also needs to format the value. What I can say is that I am not really familiar with the design decision behind this, as I was not involved in it, however, it seems that the difference might be the related to the handling of undefined and null values in this case. 

I hope your issue is now resolved. Thank you for your cooperation.

Best regards,
Bozhidara Pachilova
Associate Software Developer

After further investigation, I determined that the Angular DatePipe handles the empty string case in its transform method before passing the value to the formatDate method. For the grid cell component, there is a place, where the Angular’s formatDate method is called, however, the empty string handling is indeed missing, which leads to the observed behavior.

After reaching out to the development team, they confirmed that this should be fixed on our end. As a result, this issue is logged in our GitHub repo here.  

In order to receive a notification whenever new information is available, please make sure that you are subscribed to the issue. Until it is fixed, you could adopt the previously suggested workaround.

Please let me know if you need any further assistance regarding this matter.

Best regards,
Bozhidara Pachilova