Mapping date object when value is null, datatable date sorting

Webix JS
#1

I’ve got some datatable columns with dates that I want to sort. I understand I have to map these string values to date objects. However, not every row has a date. In case of no date, the json returns a null. In this case, the outputted date will be shown as “NaN/NaN/NaN”, the sorting also seems to behave strangely. Any way to just ignore null values and have them rendered as blank?

https://snippet.webix.com/50kumo4h

#2

Any advice on this issue? Am I implementing it wrong? It’s a fairly big issue as it affects editing of cell data (date type error in SQL). Surely I can’t be the first to sort a date column with empty values.

One idea I did have is to not use render_sql and manually return empty strings for null values.

#3

Hi,

You can try defining a data scheme instead of mapping.
It will allow for better control over the data: Code Snippet

#4

Thank you! It seems to solve the problem, however I have run into a new issue when binding with this date value.

https://snippet.webix.com/t171r94v

As you can see, in the htmlform the date format is probably not ideal. I understand the problem is the htmlform does not have a format property like datatable so the date is displayed as the full original date object. Possible to define the dateformat in the scheme?

If I change parseFormatDate to dateFormatStr it looks great, but no longer sorts.

#5

Is there any possible solution to this?

#6

You can use events instead of direct binding and control the date that is set into the form and pushed back to the datatable: Code Snippet

#7

Thanks for the solution. However, direct binding is important because the user can make changes via both the datatable and form. Bind ensures both views are always in sync and updated which is very important. Is there a reason for the formatting of the date in the binded view? I simply want to sort a date displayed in a common format and bind exactly how it appears to the htmlform. Should it really take so much modification for such functionality?

Also, from your example I modified it so that it displays the US date format in the form view. Not sure if I did this right. When I save the form, the date isn’t sent correctly to the datatable.

https://snippet.webix.com/xcyaseqz

If this is the only approach, then there is 1 other issue. I noticed the form doesn’t update immediately when value is changed in datatable. I tried to invoke a refresh, but it doesn’t seem to work.

Thank You

#8

Hello @mykal

I simply want to sort a date displayed in a common format and bind exactly how it appears to the htmlform.

If the data comes as strings to your datatable (as shown in your snippet), and it should be passed as a string to the HTML input, it is possible to treat data as a string in general and use a custom sorting pattern to sort it as dates.
Default sorting and filtering methods for dates are intended to work with Date object, but you can set your own rules of data comparison: https://snippet.webix.com/fera44sz

However, I can’t say that this approach is the best one, as in general, the best practice here is to treat dates as Date objects on the client-side.
The issues mentioned above (using events to pass the data to the form) could be resolved by

  • providing the consistent date format for data editing
  • setting onAfterEditStop event to cover the use-case where the data was edited in the cell

https://snippet.webix.com/72xcldfw

In fact, the data binding works in a similar way: it just tracks the data updates/selection and passes it to a bound component as-is, without any visual formatting. Unfortunately, data binding from a data component to a form cannot change this behaviour.