Apparent issue with date sorting

[Tom McNeer]

Hi,

I am having difficulty with date sorting in a Vue datagrid. Date columns are still being sorted as strings. In the following column structure, I have three date fields. As an illustration, each is handled differently as examples of the problem. In production, all three columns would be formatted and typed the same.

<e-column field="IncidentDate" headerText="Inc. Date" textAlign="right" :allowFiltering=false></e-column>

<e-column field="ApprovalDate" headerText="Appr. Date" format="yMd" type="date" textAlign="right" :allowFiltering=false></e-column>

<e-column field="SubmissionDate" headerText="Sub. Date" format="M/d/y" type="date" textAlign="right" :allowFiltering=false></e-column>

In the first column, I have applied no formatting nor datatype, so it will show you the raw string format being passed in. In the second and third, I have applied the "date" datatype with variations of a format string.

In the following screen shot, you can see those three fields. The sorting indicator shows that the results should be sorted by ApprovalDate ascending, yet the sorting is clearly not done by date.

Could you please explain to me why this is? I've attached a file containing the array of objects being passed to grid.

Thank you.

Attachment: grid_datasource.txt_f5d949a8.zip

[Thiyagu Subramani]

Hi Tom,  

Thanks for contacting Syncfusion forum.  

By default in EJ2 Grid the date column will be sort properly when the values in date object. In your code example we found that you have define the value in string type.  

To achieve your requirement we suggest you to define the required ApprovalDate and SubmissionDate column type as date and change the required column value from string to date using rowDataBound event.  

Please refer to the below code and sample link.  

<template> 

  <div id="app"> 

    <div> 

      <ejs-grid . . . . .   :rowDataBound="rowDataBound   > 

        <e-columns> 

          <e-column field="Market" headerText="Order ID" :isPrimaryKey="true" width="100"></e-column> 

          <e-column field="IncidentDate" headerText="Inc. Date"  textAlign="right"  :allowFiltering="false" ></e-column> 

          <e-column field="ApprovalDate" headerText="Appr. Date" format="yMd" type="date" textAlign="right" :allowFiltering="false" ></e-column> 

          <e-column field="SubmissionDate"  headerText="Sub. Date"  type="date" :format="formatOptions" textAlign="right"  :allowFiltering="false" ></e-column> 

        </e-columns> 

      </ejs-grid> 

    </div> 

  </div> 

</template> 

<script> 

. . . . . . . . . . . . . . .  

export default { 

  name: "App", 

  data: () => { 

    return { 

      data: [ 

        { 

          Market: "Atlanta", 

          CaseID: 16753, 

          DemandAmt: 72667.16, 

          IncidentDate: "June, 05 2017 00:00:00", 

          CaseManager: "Erica Hubbard", 

          TotalPaid: 30854.51, 

          Client: "Anthony Hogan", 

          Attorney: "Melissa Auzine", 

          ApprovalDate: "April, 22 2019 11:53:42", 

          Status: "Active-Pending Settlement", 

          CaseType: "Surgical", 

          SubmissionDate: "April, 09 2019 14:36:54", 

          MLCaseIdentifier: "ML17753", 

          TotalBilled: 72667.16 

        . . . . . . . . .  

        } 

      ], 

      formatOptions: { type: "date", format: "M/d/y" }, 

      editSettings: { 

        allowDeleting: true, 

        allowAdding: true, 

        allowEditing: true, 

        mode: "Batch" 

      }, 

    }; 

  }, 

  methods: { 

    rowDataBound: function(args) { 

     // Need to change string value to data value 

      args.data.ApprovalDate = new Date(args.data.ApprovalDate); 

      args.data.SubmissionDate = new Date(args.data.SubmissionDate); 

    } 

  }, 

Sample link : https://codesandbox.io/s/vue-template-cuoom?file=/src/App.vue 

Reference link : https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdatabound  

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

Regards,  

Thiyagu S