Filter the value with locale and custom format the Vue Grid

[Peter Esser]

Hi there,

We have managed to use the DateRangePicker as FilterBar component in the Grid.

So far, so good. When we stick to default culture, we can set the column filter on the grid to the datepicker value format and refresh the grid (eg: vm.$refs.pgridtable.refresh();).

If we change the "setCulture" to a language with a different date format, for example "nl" which has a date format of dd-MM-yyyy, the refresh empties the filter value after the refresh.

I have confirmed this bug by doing 2 different things:

1. When setCulture is set to "nl" choose a DateRange with start and end date with a "day" <= 12. The value is still there after a grid refresh: it reads the "day" of the value as a "month", so that's why this range is still working in "nl" format. When I choose a day of month > 12 as start or end date, the field is emptied after a grid refresh.

2. When no setCulture is applied (default en), the DateRangePicker keeps it value on a grid refresh, even when the start or end day  > 12.

I tried to setup an example, but I cannot make a working online example in codesandbox.io, it cannot handle the init of the setCulture, the loaded CLDR seems not be in the same space. As a reference I have the example url linked, but with the setCulture disabled, so it only shows the "working" solution on the default culture. Note that the actual filtering is not implemented in this example, but this is beyond the scope of the issue.

https://codesandbox.io/s/155509-daterangepicker-filtering-forked-4we86?file=/src/App.vue

Hope you can help me out with this one!

Peter

[Rajapandiyan Settu]

Hi Peter,  

  

Thanks for contacting Syncfusion support. 

 

Based on your requirement, you want to render the dateRangePicker control to filter the Date column in the Grid with different culture. We have prepared a simple sample for your requirement. You can get it from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_grid_daterange_locale335145502.zip 

 

[app.vue] 

<template> 

    <div id="app"> 

         <ejs-grid :dataSource='data' ref="grid" :allowFiltering="true" :allowPaging="true" height='315px'  :actionBegin="actionBegin"> 

            <e-columns> 

                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

                <e-column field='Freight' headerText='Freight' textAlign='Right' width=150></e-column> 

                <e-column field='OrderDate' headerText='Order Date' format="yMd" :filterBarTemplate="templateOptions" textAlign='Right' width=150></e-column> 

                <e-column field='ShipName' headerText='Ship Name' width=150></e-column> 

            </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { GridPlugin, Sort,Filter, Edit, Toolbar, Group, Page, DataResult } from "@syncfusion/ej2-vue-grids"; 

 

 

import * as cagregorian from "./ca-gregorian.json"; 

import * as currencies from "./currencies.json"; 

import * as numbers from "./numbers.json"; 

import * as timeZoneNames from "./timeZoneNames.json"; 

 

import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base'; 

import { DateRangePicker,  DateRangePickerPlugin} from "@syncfusion/ej2-vue-calendars"; 

 

// load the cldr files 

loadCldr(cagregorian, currencies, numbers, timeZoneNames);  

 

Vue.use(DateRangePickerPlugin ); 

Vue.use(GridPlugin); 

 

setCulture('nl'); 

L10n.load({ 

    'nl': { 

        ---- 

         'daterangepicker': { 

           placeholder: 'Wählen Sie einen Bereich aus', 

           startLabel: 'Wählen Sie Startdatum', 

           endLabel: 'Wählen Sie Enddatum', 

           applyText: 'Sich bewerben', 

           cancelText: 'Stornieren', 

           selectedDays: 'Ausgewählte Tage', 

           days: 'Tage', 

           customRange: 'benutzerdefinierten Bereich' 

        }, 

    } 

}); 

 

export default { 

   data() { 

    return { 

      data: data,      

      dateValue: [], 

      templateOptions: { 

        create: function (args) { 

          let elem = document.createElement("input"); 

          return elem; 

        }, 

        write: function (args) { 

          var column = args.column.field; 

          var isFiltered = Object.keys(this.$refs.grid.$el.ej2_instances[0].filterModule.actualPredicate).indexOf(column) > -1; 

          let dateRangeObj = new DateRangePicker({ 

            placeholder: "", 

            locale: "nl",  // change the locale in the DateRangePicker 

            dateFormat: "yyyy-MM-dd", 

            startDate: isFiltered ? this.dateValue[0] : null, 

            endDate: isFiltered ? this.dateValue[1] : null, 

            change: function (args) { 

              if (args.value != null) { 

                this.dateValue = args.value; 

                // clear the filtering 

                this.$refs.grid.$el.ej2_instances[0].removeFilteredColsByField(column); 

                setTimeout(() => { 

                  // filter the startdate 

                  this.$refs.grid.$el.ej2_instances[0].filterByColumn(column, "greaterthanorequal", this.dateValue[0]); 

                }); 

              } else { 

                // clear the filtering 

                this.$refs.grid.$el.ej2_instances[0].removeFilteredColsByField(column); 

              } 

            }.bind(this), 

          }); 

          dateRangeObj.appendTo(args.element); 

        }.bind(this), 

      }, 

    }; 

  }, 

  methods: {     

    actionBegin: function (args) { 

      if ( args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate") { 

        var grid = this.$refs.grid.$el.ej2_instances[0]; 

        // End date value is added as additional filter value with ‘lessthanorequal’ filter operator 

        args.columns.push({ 

          actualFilterValue: {}, 

          actualOperator: {}, 

          field: "OrderDate", 

          ignoreAccent: false, 

          isForeignKey: false, 

          matchCase: false, 

          operator: "lessthanorequal", 

          predicate: "and", 

          uid: grid.getColumnByField(args.currentFilteringColumn).uid, 

          value: this.dateValue[1], 

        }); 

      } 

    }, 

  }, 

  provide: { 

    grid: [Page, Filter, Sort, Edit, Toolbar] 

  } 

} 

</script> 

 

  

actionBegin: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

 

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

Regards, 

Rajapandiyan S