1. Home
  2. Forum
  3. Vue
  4. Problem implementing a custom component in filter menu using "DateRangePicker"

Problem implementing a custom component in filter menu using "DateRangePicker"

Hi,

I use VueJs grid and I want to make a "Custom component in filter menu" using "DateRangePicker".

I have several questions :

1. Is there a where to hide/remove the opertors dropdown list ine the modal menu (equals, contain, less, more, etc.). Because with a dateRange : no need. I will search between 2 dates and that's all.

2. I make this code (data) : 

dateRangeInstance: null,
      filterdate: {

          ui: {
              create: function (args) {
                  var _this = this;
                  vm.dateRangeInstance = new DateRangePicker({
                      placeholder: 'Select a Range',
                      change: function (e) {
                          console.log(e.value);
                          console.log(args.column.field);                      
                          if (e.value) {
                              vm.$refs.pgridtable.filterByColumn(args.column.field, "greaterthanorequal",
                                  e.value[0], "and", true);
                              vm.$refs.pgridtable.filterByColumn(args.column.field, "lessthan",
                                  e.value[1], "and", true);
                          }
                          else {
                              vm.$refs.pgridtable.grid.filterSettings.columns = [];
                              vm.$refs.pgridtable.grid.removeFilteredColsByField(args.target.id);
                          }

                      },
                  });                
                  let flValInput = createElement('input', { className: 'flm-input' });               
                  args.target.appendChild(flValInput);           
                  vm.dateRangeInstance.appendTo(flValInput);

              },
              write: function (args) {
                  console.log("filterval:" + args.filteredValue);            
              },
              read: function (args) {
                  console.log(vm.dateRangeInstance.startVal);       
              }
          }
      },


It seems that the change "launch" a filter BUT I have lines with empty values and other with date value (convert to string) :
 -> date value are removed (always, even if between dates).
 -> empty lines remains unchanged/unfiltered

What is the problem please ? I try to make "datetime" to he column type but that don't seem to change something

3. Is there a way to keep the range value indicated if we open again the filter ?
For the moment, I open, choose, apply -> that close the modal and if Re-open : empty DateRangePicker

Thanks you by advance,

Jonathan

7 Replies 1 reply marked as answer
MS Manivel Sellamuthu Syncfusion Team June 26, 2020 02:04 PM UTC

Hi Jonathan, 

Greetings from Syncfusion support. 

Query 1. Is there a where to hide/remove the opertors dropdown list ine the modal menu (equals, contain, less, more, etc.). Because with a dateRange : no need. I will search between 2 dates and that's all. 
 
Yes, you can hide the operators dropdown in the create method of the menu filtertemplate. Please find the below code example for more information. 

 return { 
      data: orderData, 
      filterSettings: { type: "Menu" }, 
      filterdate: { 
        ui: { 
          create: function(args) { 
            args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display ='none'; 
. . . 

Query2: It seems that the change "launch" a filter BUT I have lines with empty values and other with date value (convert to string) : 
-> date value are removed (always, even if between dates). 
-> empty lines remains unchanged/unfiltered 
What is the problem please ? I try to make "datetime" to the column type but that don't seem to change something 
 
We are unclear about the issue you are explaining. Could you please explain more about this issue and please share the screenshot or video demo for more information. 

For your reference we have prepared a sample with DateRangepicker for menu filter as custom component, we did not faced any issue like you mentioned. It would be more helpful, if you replicate the issue in the given sample or share the replication procedure in the below sample. 


3. Is there a way to keep the range value indicated if we open again the filter ? 
For the moment, I open, choose, apply -> that close the modal and if Re-open : empty DateRangePicker 
 
Yes. You can store the selected value in the change event of the date range picker and apply them, while opening again. Please find the below code example and sample for more information. 

export default { 
  name: "App", 
  data() { 
    let dateRangeInstance = null; 
    let dateValue = ''; 
    let vm = this; 
    return { 
      data: orderData, 
      filterSettings: { type: "Menu" }, 
      filterdate: { 
        ui: { 
          create: function(args) { 
            args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display ='none'; 
           // here we are checking the column is filtered or not 
            var isFiltered = event.target.classList.contains('e-filtered'); 
            vm.dateRangeInstance = new DateRangePicker({ 
              placeholder: "Select a Range", 
           // based on that we are setting the filtered value 
             value: isFiltered ? vm.dateValue: null, 
              change: function(e) { 
                vm.dateValue = e.value; 
                console.log(e.value); 
                console.log(args.column.field); 
                if (e.value) { 
                  vm.$refs.pgridtable.filterByColumn( 
                    args.column.field, 
                    "greaterthanorequal", 
                    e.value[0], 
                    "and", 
                    true 
. . . 
          read: function(args) { 
            console.log(vm.dateRangeInstance.startVal); 
          } 
        } 
      } 
    }; 
  }, 


Regards, 
Manivel 


Marked as answer
JO Jonathan June 27, 2020 06:41 PM UTC

Hi,

Thank you for the answer.

OK for query 1 & 3.

For query 2 : have you tried you own example ???

Filter on Order Date doesn't work : choose 1/06/2020 -> 1/07/2020 --> every date from 1996 are there (I test on firefox and chrome)

Can you help me ?

Jonathan


MS Manivel Sellamuthu Syncfusion Team June 30, 2020 10:45 AM UTC

Hi Jonathan, 

Thanks for your update. 

The Grid has ‘Excel’ filter type which has custom filter support that allows filtering multiple operators in a single column. Since this is what you are trying to achieve we suggest you to use this to achieve your requirement. More details can be found on the excel filter demo, 


If you wish to use your approach to filter using multiple operators in a column then you can achieve it by initially filtering with the start date using Grid’s filterByColumn method and in the Grid’s actionBegin event push additional filter operator for the same column. This is demonstrated in the below code snippet, 

<template> 
  <div id="app"> 
    <ejs-grid 
      id="Grid" 
      :dataSource="data" 
      :allowPaging="true" 
      :allowFiltering="true" 
      :filterSettings="filterSettings" 
      ref="pgridtable" 
      :actionBegin="actionBegin" 
    > 
      <e-columns> 
         . . . 
        <e-column 
          field="OrderDate" 
          headerText="Order Date" 
          textAlign="Right" 
          format="yMd" 
          type="date" 
          width="120" 
          :filter="filterdate" 
        ></e-column> 
. . . 
     </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
 
<script> 
 
. . . 
export default { 
  name: "App", 
  data() { 
    let dateRangeInstance = null; 
    let dateValue = ""; 
    let customFilter = false; 
    let vm = this; 
    return { 
      data: orderData, 
      filterSettings: { type: "Menu" }, 
      filterdate: { 
        ui: { 
          create: function(args) { 
            args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display = 
              "none"; 
            var isFiltered = event.target.classList.contains("e-filtered"); 
            vm.dateRangeInstance = new DateRangePicker({ 
              placeholder: "Select a Range", 
              value: isFiltered ? vm.dateValue : null, 
              change: function(e) { 
                if (e.value) { 
                  vm.dateValue = e.value; 
                  vm.$refs.pgridtable.filterByColumn( 
                    "OrderDate", 
                    "greaterthanorequal", 
                    vm.dateValue[0] 
                  ); 
                } else { 
                  vm.$refs.pgridtable.filterSettings.columns = []; 
                  vm.$refs.pgridtable.removeFilteredColsByField(args.target.id); 
                } 
              } 
            }); 
            let flValInput = createElement("input", { className: "flm-input" }); 
            args.target.appendChild(flValInput); 
            vm.dateRangeInstance.appendTo(flValInput); 
          }, 
        . . . 
          } 
        } 
      } 
    }; 
  }, 
  methods: { 
    actionBegin: function(args) { 
      // Check for filter column 
      if ( 
        args.requestType === "filtering" && 
        args.currentFilteringColumn === "OrderDate" 
      ) { 
        // End date value is added as additional filter value with ‘lessthan’ filter operator 
        args.columns.push({ 
          actualFilterValue: {}, 
          actualOperator: {}, 
          field: "OrderDate", 
          ignoreAccent: false, 
          isForeignKey: false, 
          matchCase: false, 
          operator: "lessthan", 
          predicate: "and", 
          uid: this.$refs.pgridtable.getColumnByField(args.currentFilteringColumn).uid, 
          value: this.dateValue[1] 
        }); 
      } 
    } 
  }, 
  provide: { 
    grid: [Page, Filter] 
  } 
}; 
</script> 


Please let us know, if you need further assistance. 

Regards, 
Manivel 


JD Joshua Dunn July 30, 2020 10:28 AM UTC

Is there any way to achieve this without having to use that separate actionBegin method? It seems so strange to have to hook into the filtering event like that. Is there no way to say in the change function, filterByColumn("column", expression1, expression2)

MS Manivel Sellamuthu Syncfusion Team August 3, 2020 01:10 PM UTC

Hi Joshua, 

Greetings from Syncfusion support. 

As we have stated in our previous update, You can achieve this requirement using Excel filter without applying any event hooks. But if you want to achieve the  same in Menu filter, then we can achieve it by using actionBegin event only. 

Also Currently our filterByColumn method supports to filter multiple values only, we do not have support for filtering multiple expressions in the method. 

Please let us know, if you need further assistance. 

Regards, 
Manivel 


JO Jonathan January 29, 2021 11:38 AM UTC

Hi,

A little more question about this subject.

On my side : that doesn't work for a simple reason (I think) : the dataType I receive.

I set well for column :  type="date" and a format ==> and visually that work.

BUT 

Contrairely to your example : I receive my data (ajax and not local) as JSON string (in your example you build your data with new Date())
So I receive String (representation of Date) and not Object Date.
In that case : date filter doesn't seem to work.

I thought that making column type as "DATE" would convert for filter but not : only for display.

To test : https://codesandbox.io/s/155509-daterangepicker-filtering-forked-qqnlf
This is your example but in dataSource.ts I modify orderData to return data.toDateString.

==> Display is well done but filter doesn't work anymore

Is there a way to force convert when column type is date ?

I try valueAccessor with a convertion function BUT that only impact "visual" : filter date doesn't seem to work.

Maybe I miss something.

Hope you can help me.

Jonathan





MS Manivel Sellamuthu Syncfusion Team February 2, 2021 12:46 PM UTC

Hi Jonathan, 

Thanks for your update. 

To apply date operations for grid, the date strings need to be parsed into date objects. We can parse the dataSource through parseJson method of the Grid before applying the grid. Please refer the below code example and sample for more information. 

import { DataUtil } from "@syncfusion/ej2-data"; 
 
export const orderData: Object[] = DataUtil.parse.parseJson( 
  stringData, 
  (field: any, value: any) => { 
    let dupValue: any = value; 
    if ( 


Please let us know, if you need further assistance. 

Regards, 
Manivel 


Loader.
Up arrow icon