Filter v

Filter v

Posted by: sbhadane on 31 March 2025, 11:03 am EST

• 

  sbhadane

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 March 2025, 11:03 am EST - Updated 1 April 2025, 3:56 am EST

  I have a usecase where I need to intercept the click event of the filter button and before the filter context menu opens need to run some code.
  
  How to intercept the click event of the filter button?
  
  Or if you can help me with some selector to access the filter button.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 1 April 2025, 6:41 am EST - Updated 1 April 2025, 6:46 am EST

  Hi,

  It is possible to perform a custom action when the filter button is clicked by handling the openFilterDialog: https://developer.mescius.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Filter.RowFilterBase#openfilterdialog function of the row filter of SpreadJS sheets. Please refer to the code snippet below that illustrates the same:

  var filterButtonDialogHandler = spread.getActiveSheet().rowFilter().openFilterDialog;
  spread.getActiveSheet().rowFilter().openFilterDialog = function(filterButtonHitInfo) {
    // Execute custom logic
    filterButtonDialogHandler.call(this, filterButtonHitInfo);
  }

  You can further refer to the attached sample that uses the code snippet above and executes the custom logic before the filter dialog is opened (see below).

  Please feel free to reach out if you require any additional guidance.

  FilterButton: https://jscodemine.mescius.io/share/inLr7Ag0eUGXY8nirCsEPA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}

  GIF:

  Regards,

• 

  sbhadane

  • Post Options:
  • Link
    Copy

  Posted 3 April 2025, 8:59 am EST

  Hi ,

  Thank you for the response , similar to openFilterDialog is there anyway to detect the closing of filter dialog ?

  Thanks & Regards,

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 4 April 2025, 4:52 am EST - Updated 4 April 2025, 4:57 am EST

  Hi,

  There is no public API in SpreadJS that can handle the closing of the filter dialog. However, it is possible to detect if the filter dialog is closed by using Mutation Observer. Please refer to the code snippet below that illustrates the same:

  const filterDialog = document.querySelector('[sjs-dialog="filter"]');
  console.log(filterDialog);
  if (filterDialog) {
    const observer = new MutationObserver((mutationsList) => {
      for (let mutation of mutationsList) {
        mutation.removedNodes.forEach((node) => {
          if (node === filterDialog) {
            observer.disconnect();
            // Run your custom logic at filter dialog close here
          }
        });
      }
    });
  
    if (filterDialog.parentNode) {
      observer.observe(filterDialog.parentNode, {
        childList: true,
      });
    }
  }

  You can further refer to the attached code sample that uses the above code snippet and handles the closing of the filter dialog (see below).

  Additionally, could you please share your use case so that we can work on exposing the close filter dialog events?

  Attachment: FilterButton: https://jscodemine.mescius.io/share/inLr7Ag0eUGXY8nirCsEPA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}

  GIF:

  Best Regards,