Validation on Filter popup

[Ton That Hung]

Hi Syncfution Team,
I'm using the Filter feature on the Grid component. I need to filter the date column.
 When the user enters the date in the wrong format and clicks the Filter button, the Filter popup can't close and the dataSource doesn't filter. 
I have read the document of Syncfusion but I can't find any way to reach my requirement.
Link sample: https://stackblitz.com/edit/react-lh1gur?file=index.js

Thanks.

[Rajapandi Ravi]

Hi Ton,

Greetings from Syncfusion support

Based on your query we have checked your shared sample and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer to the below video demo for more information.

Sample: https://stackblitz.com/edit/react-lh1gur-9kvedp?file=index.js

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/filterdatemeu879142703.zip

If you still face the issue, please share the below details that will be helpful for us to provide better solution.

1)             Share your exact requirement scenario with detailed description.

2)              Share your syncfusion package version.

3)             Share the details about on what format you are trying to filter the Date column, please share the issue scenario in video demonstrating or pictorial representation

                 that would be helpful for us to validate.

Regards,

Rajapandi R

[Ton That Hung]

it seems that my expression confuses you.

My requirement is: when user enters wrong date format and clicks filter button, popup should stay intact, not close and table data should also be preserved, no filter.

fact: when the user enters the wrong date format, the table is still filtered and the popup is closed

[Rajapandi Ravi]

Ton,

Based on your query we could see that you like to prevent closing and filtering the date column when the date is wrong , we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

const actionbegin =(args)=> { //actionBegin event of Grid

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

      if(args.currentFilterObject.value === null) {

        args.cancel = true; //filter prevent

        gridInstance.filterModule.filterModule.closeDialog =  function(args) {

          console.log('close dialog')

          return false;

        }

      }

      else {

        gridInstance.filterModule.filterModule.closeDialog();

      }

    }

  } 

 

Sample: https://stackblitz.com/edit/react-lh1gur-hbrkaf?file=index.js

Regards,

Rajapandi R

[Ton That Hung]

Thanks for your support.
But your solution has a problem.
The first time, I enter the date wrong => filter => the popup isn't closed. It's OK.
But after that, I can't close the popup although I enter the date valid.

[Ton That Hung]

Hi Rajapandi,

Do you have any solution to this problem?

Thanks.

[Suganya Gopinath]

Ton,

Currently, our team is validating this query in the source, and they will update you on the details on or before 14th Dec 2022.

[Rajapandi Ravi]

Ton,

Based on your query we have prepared a sample and achieved your requirement by overriding the closeDialog method in our source. So, we suggest you follow the below way to achieve your requirement. Please refer the below code example and sample for more information.

import {

  GridComponent,

  ColumnsDirective,

  ColumnDirective,

  Page,

  Sort,

  Filter,

  Inject,

  clearReactVueTemplates,

} from '@syncfusion/ej2-react-grids';

 

import {remove} from '@syncfusion/ej2-base';

 

  const actionbegin =(args)=> { //actionBegin event of Grid

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

      if(args.currentFilterObject.value === null) {

        args.cancel = true; //cancel the filter action

 

        gridInstance.filterModule.filterModule.closeDialog = function (target) {//override closeDialog

          if (!this.dlgObj || (this.filterObj.currentFilterObject.value === null && (this.filterObj.column.type === 'date' || this.filterObj.column.type === 'datetime'))) { return; }

          if (this.parent.isReact || this.parent.isVue) {

              clearReactVueTemplates(this.parent, ['filterTemplate']);

          }

          const elem = document.getElementById(this.dlgObj.element.id);

          if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {

              const argument = { cancel: false, column: this.col, target: target, element: elem };

              this.parent.notify('filter-menu-close', argument);

              if (argument.cancel) { return; }

              this.isDialogOpen = false;

              this.dlgObj.destroy();

              remove(elem);

          }

          this.parent.notify('filter-dialog-close', {});

        }

      }

    }

  }

 

Sample: https://stackblitz.com/edit/react-lh1gur-cffjau?file=index.js

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/filterpopup955702344.zip

Regards,

Rajapandi R

[Ton That Hung]

Rajapandi,

Thank you for being so supportive.

I have checked and it still have 2 problem:

The first is:

Steps:

1. Open the filter popup and fill in the wrong date, such as "abcxyz".
2. Click filter button
3. Click clear button
   

And the second is:

Steps:

1. Open the filter popup, fill in the correct date, such as "12/13/2022", and click the filter button.
2. Re-open the filter popup, fill in the wrong date, such as "abcxyz", and click the filter button.
3. Fill in the correct date, such as "12/13/2022", and click the filter button.
   
4. Re-open the filter popup, and focus on the input field, it doesn't have the value

[Rajapandi Ravi]

Ton,

Based on your query we have modified the sample and we suggest you use the below way to resolve your problem. Please refer the below code example and sample for more information.

 

const actionbegin =(args)=> {

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

     

      if(args.currentFilterObject.value === null) {

        args.cancel = true;

        args.columns.filter(function (fColumn) {

 

          if (fColumn.field === "OrderDate") {

            fColumn.uid = args.currentFilterObject.uid;

          }

      });

        gridInstance.filterModule.filterModule.closeDialog = function (target) {

          if (!this.dlgObj || ((this.filterObj.currentFilterObject.value === null && (this.filterObj.column.type === 'date' || this.filterObj.column.type === 'datetime')) && document.activeElement.innerText !== 'Clear')) {

            if(this.filterObj.currentFilterObject.value === null && (this.filterObj.column.type === 'date' || this.filterObj.column.type === 'datetime')) {

              this.filterSettings.columns.splice(this.filterSettings.columns.length - 1, 1);

            }

           

            return;

          }

          if (this.parent.isReact || this.parent.isVue) {

              clearReactVueTemplates(this.parent, ['filterTemplate']);

          }

          const elem = document.getElementById(this.dlgObj.element.id);

          if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {

              const argument = { cancel: false, column: this.col, target: target, element: elem };

              this.parent.notify('filter-menu-close', argument);

              if (argument.cancel) { return; }

              this.isDialogOpen = false;

              this.dlgObj.destroy();

              remove(elem);

          }

          this.parent.notify('filter-dialog-close', {});

        }

      }

    }

  }

 

Sample: https://stackblitz.com/edit/react-lh1gur-kcrvnp?file=index.js,data.js

[Ton That Hung]

Thanks for your support.

[Rajapandi Ravi]

Ton,

Most Welcome.