Grid Filter Dialog Issue

[David Chong]

Hi Support,

I have bit of annoying request. Please see attached image

On above screenshot, When filter dialog (small popup) is opened, how do I prevent small popup (dialog) being closed when user click outside popup area. This might be unusual request, but please help as I don't want user to accidentally closed filter popup.

Regards,

David Chong

[Vignesh Sivagnanam]

Hi David, 

Thanks for contacting Syncfusion support 

Based on your query, we understand that you want to prevent the closing of filter dialog while clicking outside of the dialog. We prepared a sample based on your query using the internal event of the grid component. Please refer the below Code Example and Sample for your reference 

Code Example :  

Created(args) { 

    this.grid.on( 

      "filter-menu-close", 

      function(args) { 

        if ( args.element.innerText === "FILTERCLEAR" && args.target === undefined) { 

          args.cancel = false; 

        } else { 

          args.cancel = true; 

        } 

      }, 

      this 

    ); 

  } 

Sample : https://stackblitz.com/edit/angular-bvb538-yfp72t?file=app.component.ts 

Regards 

Vignesh Sivagnanam 

[Lana]

Hello, I need the same but in TreeGrid component (in Vue). I tried the same internal event, but it looks like TreeGrid doesn't fire it. Here is what I tried:

mounted () {
        this.$refs.treegrid.ej2Instances.on(
            'filter-menu-close',
            function (args) {
                (args.element.innerText === 'FILTERCLEAR' && args.target === undefined) {
                    args.cancel = false
                } else {
                    args.cancel = true
                }
            },
            this.$refs.treegrid.ej2Instances
        )
    },

Do I do something wrong? Or TreeGrid doesn't have such event? If so then how can I prevent closing filter menu? My filter menu has a custom component - date range picker. When user chooses the range, the filter menu is closed because it's a click outside the filter menu. 

[Karthikeyan Thangaraj]

Hi Lana,

Thanks for contacting Syncfusion support.

To achieve your requirement by overriding the closeDialog event handler within the actionComplete event with the requestType filterAfterOpen and configuring it to execute the dialog close action only when clicking on the filter and clear buttons. Please refer to the code snippet and modified sample provided below for your reference:

[App.vue]

 

actionComplete: function (args): void {

 

    if (args.requestType === 'filterAfterOpen') {

 

        const closeDialog = (this as any).$refs.treegrid.ej2Instances.grid.filterModule.filterModule.closeDialog;

 

        (this as any).$refs.treegrid.ej2Instances.grid.filterModule.filterModule.closeDialog = function (args: any) {

 

            !args && closeDialog.call(this, args);

 

        };

    }

}

 

Sample:- https://stackblitz.com/edit/uclprn-4rdpm9?file=src%2FApp.vue,package.json

Kindly revert us back for further assistance.

Regards,

Karthikeyan T

[Lana]

Hi, thank you for help!

[Getsy Edwin]

Hi Lana,

You're welcome!! Please get back to us if you need any other assistance.

Regards,

Getsy