Excel filter doens't work with custom date format

[NAUD]

Hi,

I change date format to 'dd/MM/yyyy' on date field and Excel filters doesn't work :

 

Without custom date, all works perfectly :

<template>

  <div id="app">

    <ejs-grid

      locale="fr"

      :dataSource="items"

      :allowSorting="true"

      :allowResizing="true"

      :allowPaging="true"

      :allowFiltering="true"

      :allowGrouping="groupingActivated"

      :filterSettings="filterOptions"

      :searchSettings="searchOptions"

      :pageSettings="pageSettings"

      :selectionSettings="selectionOptions"

      :dataBound="dataBound"

      :frozenColumns="groupingActivated ? 0 : frozenColumns"

      @recordClick="recordClick($event)"

      :rowSelected="rowSelected"

      rowHeight="38"

      height="100%"

      ref="grid"

    >

      <e-columns>

        <e-column

          type="checkbox"

          textAlign="Center"

          width="40"

          :allowResizing="false"

        ></e-column>

        <e-column

          v-if="isActionPropActive"

          maxWidth="130"

          textAlign="Center"

          :template="colTemplate"

          :allowSorting="false"

          :allowResizing="false"

        ></e-column>

        <e-column

          v-for="field in fields.filter((f) => f.key !== actionsProp)"

          :key="field.key"

          :field="field.key"

          :headerText="field.label"

          :allowSorting="field.sortable"

          :visible="field.visible"

          :disableHtmlEncode="false"

          :type="field.type"

          :format="field.type == 'date' ? dateFormat : ''"

          width="150"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from "vue";

import {

  GridPlugin,

  Resize,

  Sort,

  Page,

  Filter,

  Group,

  Freeze,

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

import ButtonActionsTableSF from "@/components/common/ButtonActionsTableSF.vue";

Vue.prototype.$eventHub = new Vue();

Vue.use(GridPlugin);

export default {

  components: {

    ButtonActionsTableSF,

  },

  props: {

    frozenColumns: Number,

    items: Array,

    fields: Array,

    filterValue: String,

    loading: Boolean,

    groupingActivated: Boolean,

    actionsProp: {

      type: String,

      default: "#",

    },

    isActionPropActive: Boolean,

  },

  provide: {

    grid: [Page, Resize, Sort, Filter, Group, Freeze],

  },

  created() {

    this.$eventHub.$on("edit", (id) => {

      this.$emit("edit", id);

    });

    this.$eventHub.$on("remove", (id) => {

      this.$emit("remove", id);

    });

  },

  data: () => {

    return {

      colTemplate: function () {

        return { template: ButtonActionsTableSF };

      },

      pageSettings: {

        pageSizes: [10, 25, 50, 100, 200],

        pageCount: 4,

        pageSize: 25,

      },

      filterOptions: {

        type: "Excel",

      },

      filter: {

        type: "CheckBox",

      },

      selectionSettings: {

        persistSelection: true,

        type: "Multiple",

        checkboxOnly: true,

      },

      selectionOptions: { mode: "Row", checkboxMode: "ResetOnRowClick" },

      dateFormat: { type: "date", format: "dd/MM/yyyy" },

    };

  },

  methods: {

    dataBound: function (args) {

      // Dimensionne les colonnes en fonction du contenu

      this.$refs.grid.autoFitColumns();

    },

    // Evènement onClic sur la ligne

    recordClick: function (args) {

      if (args.cellIndex > 1) {

        this.$emit("rowClick", args.rowData);

      }

    },

    // Retourne les lignes sélectionnées

    rowSelected: function (args) {

      this.$emit("selectionChange", this.$refs.grid.getSelectedRecords());

    },

  },

  computed: {

    searchOptions: function () {

      return {

        operator: "contains",

        key: this.filterValue ? this.filterValue : "",

        ignoreCase: true,

      };

    },

  },

};

</script>

<style>

@import "../../../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-buttons/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-calendars/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-navigations/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-popups/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";

@import "../../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

.e-pager .e-currentitem,

.e-pager .e-currentitem:hover {

  background-color: var(--info);

}

.e-grid .e-frozenheader > .e-table,

.e-grid .e-frozencontent > .e-table,

.e-grid .e-frozencontent .e-virtualtable > .e-table,

.e-grid .e-frozenheader .e-virtualtable > .e-table {

  border-right-color: var(--info);

}

.e-headertext {

  font-size: 12px !important;

}

.e-pager .e-pagerconstant {

  margin: 0 0 8px 12px;

}

</style>

 

Thank you for your reply.

[Joseph Christ Nithin Issack]

Hi NAUD, 

  Thanks for your update. 

 Based on your requirement,  when you set the custom date format for  a date column Excel filter is not working, but when you remove the custom date format Excel filtering is working fine. Currently we are validating the reported issue from our side. We will provide further details on this on or before 4^th October , 2021. We appreciate your patience until then. 

Regards, 

Joseph I. 

[NAUD]

Thanks you for your response.

I found the problem, null date was a empty string. With null date it works.

Thanks

[Balaji Sekar]

Hi NAUD, 

  

Thanks for the update. 

  

We are happy to hear that your issue has been resolved. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Balaji Sekar.