Filter pop up in the grid and scroll bar in the grid.

[Adarsh N P]

While scrolling or clicking on the scroll bar when the filter popup is present, we need to close the filter popup as per the requirement. Or either should not allow user to scroll through the main grid table.

[Vikram Sundararajan]

Hi Adarsh N P,

Greetings from Syncfusion support,

We understand that you want close the filter dialog when scrolling on the grid scrollbar. We have achieved your requirement by using actionComplete event. Please refer the below code snippet and sample for more reference,

App.Vue:

 

 methods: {

    actionComplete(args) {

  

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

     

        this.attachScrollListener();

      }

    },

    attachScrollListener() {

      const gridElement = this.$refs.grid.$el;

      gridElement.querySelector('.e-content').addEventListener('scroll', this.closeFilterPopup);

    },

    closeFilterPopup() {

      const grid = this.$refs.grid.ej2Instances;

      grid.filterModule.filterModule.excelFilterBase.closeDialog();

    }

  }

Sample: https://stackblitz.com/edit/pvq3nm-4htaeq?file=src%2FApp.vue

actionComplete: https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete

Please get back us if you need further assistance.

Regards,

Vikram S

[Adarsh N P]

Hi,

Have implemented the above solution mentioned, but couldn't work accordingly as expected. Having the same result as before. We were able to use the horizontal scroll bar in the main grid and the filter popup is still visible, not closing. Before adding the above piece of code also we had the same situation. 

[Vikram Sundararajan]

Hi Adarsh N P,

 

We understand that the filter dialog is still visible when scrolling the horizontal scrollbar in the grid. We have checked your query but were unable to replicate the reported problem on our end. Please refer to the sample and video demonstration below for more information:

 

Sample: https://stackblitz.com/edit/pvq3nm-fxjlgd?file=src%2FApp.vue

Video: Filter_Scrolling

 

We recommend using the provided sample as a reference to resolve the issue you mentioned. If the issue persists, please provide the below details for further validation,

 

1. Could you please share a video demo with an explanation of your issue in detail? This will help us understand your needs better and ensure we provide the right solution.
2. Please provide us with an issue-reproducible sample or try reproducing the issue in the sample we shared. This information would be immensely helpful in understanding the problem more comprehensively.

 

Regards,

Vikram S

Attachment: Filter_Scrolling_9f6ecb99.zip

[Adarsh N P]

I implemented the solution you provided, but it didn't work as expected. I'm still facing an issue with the filter. We can use the horizontal scrollbar in the main grid, but when I apply my code, the filter dialog closes within 3-5 seconds, even without scrolling. I used the following methods:
 dialogObj.hide();
 dialogObj.destroy();
 Additionally, the filter dialog automatically closes if reopened, preventing us from selecting any filter options.

[Aishwarya Rameshbabu]

Hi Adarsh,

Upon reviewing your query, we have observed that you are utilizing the hide and destroy methods to close the filter dialog, and you are encountering issues with this approach. In the previously provided sample, we demonstrated the closing of the filter dialog upon the scrolling of Grid content. However, it appears you are still facing difficulties. To proceed with an effective solution, we require additional information from you.

1. You mentioned the need to close the filter dialog of the main grid. Kindly confirm whether you are using the hierarchical Syncfusion Grid in your application or if you are using multiple Grids on the same page.
2. Kindly share the complete Grid rendering code along with any event handler functions implemented.
3. Specify the version of the Syncfusion package you are currently using.
4. We also request you to attempt replicating the issue with the provided sample, or alternatively, share a simple replication sample.
5. Additionally, provide a video demonstration illustrating the issue replication.

Providing these details will enable us to validate the issue you are facing more effectively and to deliver an optimal solution as promptly as possible.

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

Regards

Aishwarya R