1. Home
  2. Forum
  3. Vue
  4. Columns with type 'date' do not sort properly

Columns with type 'date' do not sort properly

It appears that even with a type of 'date,' columns containing dates are sorted as string.

I'm guessing that the issue has to do with the formatting of the column, but I need to understand how to make dates sort properly.

Here's an example of a column configuration:

<e-column
field="PaymentDate"
headerText="Date Paid"
format="yMd"
type="date"
textAlign="center"
width="90"
:allowFiltering="false"
></e-column>

5 Replies
RS Rajapandiyan Settu Syncfusion Team January 7, 2021 08:27 AM UTC

Hi Tom, 

Thanks for contacting Syncfusion support. 

Query: It appears that even with a type of 'date,' columns containing dates are sorted as string. 
I'm guessing that the issue has to do with the formatting of the column, but I need to understand how to make dates sort properly. 

Before proceeding with your query, we would like to share the behavior of date typed column in Grid. 

By setting the type as date, we can display the dateString into dateObject format in the Grid. But this is used only for the display purpose. 

In EJ2 Grid, the Filtering, Sorting, Grouping actions are performed with the data values as in the Grid’s dataSource. If the Date typed column has string value in the dataSource, then performing Sort, Filter, Group actions works like a string. This is the default behavior of Grid. 

If you want to perform Sort action as like date object, we suggested you use dateObject in the Grid dataSource instead of using dateString. Refer to the below code example and sample for more information. 

<template> 
  <div id="app"> 
    <ejs-grid :dataSource="data" :allowSorting="true" height="315px"> 
      <e-columns> 
        -----
        <e-column 
          field="OrderDate" 
          headerText="Date Paid" 
          type="date" 
          format="yMd" 
          textAlign="center" 
          width="90" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
---- 
 
export default { 
  data() { 
    return { 
      data: [ 
        { 
          OrderID: 10248, 
          CustomerID: "VINET", 
          OrderDate: new Date("2027-01-01T00:00:00.000Z"),  // use dateObject in your dataSource 
        }, 
        ------- 
      ], 
    }; 
  }, 
----- 
}; 
</script> 
  

Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


TM Tom McNeer January 7, 2021 03:35 PM UTC

Thanks for your reply.

I understand your explanation about the date object. However, since the data arrives as a json string from the server, there needs to be a process on the client side to handle the data in bulk.

I have attempted to use your DataUtil in the following manner:

bData() {
return DataUtil.parse.parseJson(JSON.stringify(this.billingData))
}

This creates a data object to be used in the grids by parsing data sent to the component as a prop.

However, the date sorting still does not work. In fact, clicking the sort function on a column repeatedly produces different sorting. It doesn't even seem consistent as a string sort. 

Any suggestion for parsing a full set of data to correctly create date objects would be appreciated.

TS Thiyagu Subramani Syncfusion Team January 8, 2021 01:30 PM UTC

Hi Tom, 

Thanks for your update. 

By default in EJ2 Grid the date column will be filter and sort properly when the values in date object explained in previous update. So in your update you have used parseJson to modify string to date object but in parseJson if you are using required date value as like ‘5/5/2013’ you have to pass this string to newDate(). So we have modified that required string type value to the required date object using rowDataBound event because rowDataBound event will triggers every time a request is made to access row information, element, or data. This will be triggered before the row element is appended to the Grid element. Likewise you can achieve your requirement as per your needs. 

For more information please refer the below code block and  screenshots. 

 
 rowDataBound: function (args) { 
      args.data.OrderDate = new Date(args.data.OrderDate);     
    }, 

 
 


For more reference please refer below sample. 


Note: If we use date string as like T00:00:00.000Z , it is a part of ISO-8601 date representation. So for this case if you set type as datetime in column level then it will be converted into the date object in source level.  

Please get back to us, if you need any further assistance.  

Regards,  
Thiyagu S  


TM Tom McNeer January 15, 2021 04:56 PM UTC

Thanks very much. You may close this ticket.

BS Balaji Sekar Syncfusion Team January 18, 2021 01:17 PM UTC

Hi Tom, 
  
We glad that your issue has been fixed.  
  
Please get back to us if you require further other assistance from us. 
  
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon