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

[Jonathan]

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

[Manivel Sellamuthu]

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. 

Sample: https://codesandbox.io/s/155509-daterangepicker-filtering-wi015?file=/src/App.vue:1356-2152 

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); 

          } 

        } 

      } 

    }; 

  }, 

Sample: https://codesandbox.io/s/155509-daterangepicker-filtering-wi015?file=/src/App.vue:1356-2152 

Regards, 

Manivel 

[Jonathan]

Hi,

Thank you for the answer.

OK for query 1 & 3.

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

If you try your example : https://codesandbox.io/s/155509-daterangepicker-filtering-wi015?file=/src/App.vue:1356-2152

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

[Manivel Sellamuthu]

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, 

Demo: https://ej2.syncfusion.com/vue/demos/#/material/grid/filter-menu.html 

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> 

Modified Sample: https://codesandbox.io/s/155509-daterangepicker-filtering-wi015?file=/src/App.vue 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Joshua Dunn]

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)

[Manivel Sellamuthu]

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 

[Jonathan]

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

[Manivel Sellamuthu]

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 ( 

Sample: https://codesandbox.io/s/155509-daterangepicker-filtering-forked-kzkt9?file=/src/dataSource.ts 

Please let us know, if you need further assistance. 

Regards, 

Manivel