Sample report by integrating with Data server

Hello, Gokul!

Thank you for your question.

We are glad to hear that you could create the necessary report layout. For implementing a shared report filter area for two tables, we recommend hiding the default filters for both tables by setting the showFilter and showReportFiltersArea grid options to false. Then, you can add a custom filter area with a single filter outside of Flexmonster. This filter area can be implemented in the following ways:

1. Adding a custom filter handler, which would rely on the setFilter method to modify the filter configuration: https://jsfiddle.net/flexmonster/vms57Lyu/
2. Using a button that would open Flexmonster's filter view using the openFilter API call: https://jsfiddle.net/flexmonster/wz6dh5yb/

The filters can be synced between the two tables using the reportchange event. This event will be triggered on every filter applied, allowing one to set a filter on a table when another is filtered. This approach would work independently of which field is used for filtering.

Please let us know if one of the approaches we have provided works for you.

Best regards,
Maksym

Hello, Gokul!

Thank you for your reply.

For your case, we recommend using the showFilter option. When set to false, this option hides the report filters area and removes filter buttons from header cells on the grid.
This option can be predefined in the report config to disable filters on load, as is shown in this JSFiddle: https://jsfiddle.net/flexmonster/a85t1fy0/

Regarding the infinite refresh loop, we appreciate you pointing this out to us. The syncing logic we provided does not account for working with asynchronous data sources like FDS, and is only viable for JSON or CSV data. We suggest removing the filter syncing from the second table, which is set in the reportchange event handler. This way, the filter would first be applied to one table, then set to another, without causing an infinite loop. Also, you could entirely remove the filter syncing and use the setFilter API call to set filter for both tables; however, this approach would only work when creating a custom filter handler.
Please check the fixed code samples:

• Using the openFilter to open Flexmonster's filter view from a custom button: https://jsfiddle.net/flexmonster/wz6dh5yb/
• Adding a custom filter handler and applying filters with the setFilter: https://jsfiddle.net/flexmonster/vms57Lyu/

We are looking forward to hearing your feedback.

Best Regards,
Maskym

Hello, Gokul!

Thank you for sharing the code snippets.

We recommend adjusting the filter syncing logic to only transfer filter settings from the first to the second Flexmonster table to avoid using the second apply button. Based on your use case, this would be enough for implementing a single filter handler for two grids. The syncing logic between the two tables was only necessary if on-grid filters were used. If they are disabled, the complex syncing logic is redundant, and you can simply detect the change in one table with the reportchange event and pass it to another:

function interpolateFilter(pivotFrom, pivotTo) {
  const hierarchies = pivotFrom.getAllHierarchies()
  hierarchies.forEach((item) => {
    pivotTo.setFilter(item.uniqueName, pivotFrom.getFilter(item.uniqueName))
  })
}

We have also adjusted the previously provided JSFiddle example to include this change: https://jsfiddle.net/flexmonster/wz6dh5yb/
Note that this function is only called for the first table (see line 52 in JSFiddle):

reportchange: () => {
  interpolateFilter(pivot1, pivot2)
},

Please let us know if our answer helped you.

Best Regards,
Maksym