Hello Team,
I m binding the data to a webix datatable asynchronously. I want to sort the data with the date column(say createdDate ).
I used the following code for DateColumn
“width”: 123,
“id”: “createdDate”,
“tooltip”: false,
“sort”: “date”,
“header”: “Date Added”,
“editor”: “date”
I don’t know why I m unable to sort the data with respect to Date column. And also can you help me in highlighting the column header(up/down arrows) on load(without header click).
Hello,
Date sorting works fine if dates are presented as date objects. If you have string values, you need to map them:
{
"map":"(date)#createdDate#", "id": "createdDate",
"sort": "date", "header": "Date Added", "editor": "date"
}
To sort a datatable after the data is loaded, you can call sort method in ready handler (onAfterLoad event goes as well).
To show a a “sort” arrow, markSorting method is used:
ready:function(){
this.sort("createdDate", "desc", "date");
this.markSorting("createdDate", "desc");
}
Check the snippet please http://webix.com/snippet/a5d31056
Hello Helga, is it possible to maintain an ISO8601 format (eg: 2017-02-24 08:37:27) in a column, while still using the built in presentation and sorting logic?
Thanks
Hello,
Sure, you can load dates either as strings or date objects, map string dates into objects and use any format of visual presentation for the needed column:
columns:[
{ id:"createdDate", format:webix.i18n.parseFormatStr}
]
Check the snippet, please: http://webix.com/snippet/4c41714e
Thanks Helga, your example was great. I have another query - I have one view/panel that uses the format “2017-02-24 08:37:27” (and your example worked perfectly) and another view/panel in the same application that requires a higher resolution on the time portion so renders the milliseconds like “2017-02-24 08:37:27.345”. Is it possible to use this second format? I could not find any reference to milliseconds in the documents. Thanks again
Unfortunately, now there’s no built-in helper in Webix to include milliseconds into a date string.
But you can declare a custom formatting function, which will parse the Date object with respect to milliseconds: http://webix.com/snippet/2e1fb76f.
Thank you for the suggestion Helga, unfortunately I need to be able to both display the milliseconds and have the column sortable (with the milliseconds factored into that sort algorithm). The date/timestamps are coming from a database in the format “2017-02-24 08:37:27.345” as a text string.
If I add a line { text:"Dunno", createdDate:"1988-01-29 23:12:34.358" }, to your snippet example it breaks the sort functionality. Would this need me to write my own sort function? Thanks again -SrvrSide
If you dates come as strings from the database, you will have to provide the related parser to fill the datatable with the correct object dates (to enable valid date sorting).
view:"datatable",
scheme:{
$init:function(obj){
obj.createdDate = /*parse string into date*/
}
}
As I’ve mentioned before, built-in Webix date helpers do not include milliseconds into the logic,so you have to provide these functions yourself.
Please, check the possible implementation: http://webix.com/snippet/02a7b3d3
If you don’t need the mulliseconds, you can use Webix helpers: http://webix.com/snippet/9a64ceac
Btw, string sorting may as well be ok for string dates: http://webix.com/snippet/979ee98b
Thank you so very much Helga - I’ll try your suggestions
Anyway, we will consider adding the parsing of milliseconds into the next version.
We have added the possibility to parse milliseconds as
var date = webix.Date.strToDate("%Y-%m-%d %H:%i:%s.%S")(str);
var str = webix.Date.dateToStr("%Y-%m-%d %H:%i:%s.%S")(date);
It is already available in Webix 4.2.10 PRO and will also be included in the nearest GPL update.
I can get sorting working for dates when data loads for the first time using the ‘map’ property, map method, and also scheme.$init, but, when use the .load() method (datatable) to reload the data (kind of refresh), the date sorting stops working.
Noticed that data doesn’t map in this case, the $$(‘datatable’).data.pull records got now a string value, not date object.
There is any way of forcing the map to apply to new loaded data?
Update:
Figure a solution on the meantime. Have used scheme.$change. and this does the job.