Filtering date after format produces no records found

[Eric Brennan]

Hello, Ive been working on an issue all day and cant seem to figure it out.

I have a data-grid with a date field.

<ejs-grid ref="grid" :dataSource="data" :allowSorting="true" :allowFiltering='true' :filterSettings='filterSettings' :load='load'>

                    <e-columns>

                        <e-column field='fullName' headerText='Employee Name' width='150' :filter="cbFilter"></e-column>

                        <e-column field='department' headerText='Department' width='120' :filter="cbFilter"></e-column>

                        <e-column field='team' headerText='Team' width='150' :filter="cbFilter"></e-column>

                        <e-column field='role' headerText='Role' width='150' :filter="cbFilter"></e-column>

                        <e-column field='startDate' headerText='Start Date' width='130' format="yMd" type="date"></e-column>

                        <e-column field='status' headerText='Status' width='130' :filter="cbFilter"></e-column>

                    </e-columns>

                </ejs-grid>

The "startDate" field in the object is "startDate:"2019-12-13T00:00:00" this is taken from my api

 

Which displays to the grid as "12/13/2019"

However, when I apply any filter to the date column, no results are displayed. 

Filtering is working fine for the other columns.

[Rajapandi Ravi]

Hi Eric, 

Greetings from syncfusion support 

Query#: However, when I apply any filter to the date column, no results are displayed. 

Based on your we have prepared a sample and achieve your requirement by parsing the values by using dataUtil method. It helps to filter the date column as your desired format. So we suggest you to follow the below way to achieve your requirement. Please share the below code example and sample for more information. 

 <template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :pageSettings="pageOption" 

      :toolbar="toolbar" 

      :allowFiltering='true' 

      :editSettings="editSettings" 

      allowPaging="true" 

    > 

      <e-columns> 

        .  .  .  .  .  .  .  .  .  

        <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" type="date"></e-column> 

        .  .  .  .  .  .  .  .  .  

      </e-columns> 

    </ejs-grid> 

    <div id="head">Fitlered Data 

      <div id="Grid"></div> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Grid, 

  Filter, 

  Edit, 

  Page, 

  Toolbar 

} from "@syncfusion/ej2-vue-grids"; 

import { DataUtil } from '@syncfusion/ej2-data'; 

import { data } from "./datasource.js"; 

import Vuex from "vuex"; 

 

Vue.use(Vuex); 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: DataUtil.parse.parseJson(data), 

      grid: "", 

      toolbar: ["Add", "Delete", "Update", "Cancel"], 

      flag: true, 

      pageOption: { 

        pageSize: 3 

      }, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Batch" 

      } 

    }; 

  }, 

  methods: { 

  }, 

  provide: { 

    grid: [Edit, Toolbar, Page, Filter] 

  } 

}; 

</script> 

 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

Sample: https://codesandbox.io/s/146774-dynamic-grid-modified-bx809 

Regards,
Rajapandi R