[REACT] I want to customize FieldFilterPickerGroup

[bharat95]

Hi,

I want to show field filter picker group based on button and also want to display custom options inside it.

The button similar to https://bryntum.com/products/grid/examples/facet-filter/ and the filter to be displayed similar to https://bryntum.com/products/grid/examples/fieldfilters/ with custom filter options in react typescript.

Thanks,
Bharat

[alex.l]

Hi Bharat,

So what is your question?

[bharat95]

Hi,

My question is like how I can achieve using button in tbar using react typescript.

Thanks,
Bharat

[alex.l]

To add button to a toolbar you need to add it to https://bryntum.com/products/gantt/docs/api/Core/widget/Toolbar#config-items list. We have example of using toolbars in our React demos, it's just the same as for vanilla.

[ghulam.ghous]

Hi Bharat,

Please checkout this demo react + typescript where we have implemented a facetFilter https://bryntum.com/products/grid/examples/frameworks/react-vite/facet-filter/dist/. You can take some inspiration from this example and implement your desired behaviour.

Regards,
Ghous

[bharat95]

Hi,

Here I want to explain that I'm using scheduler pro with dragging resources from external grid. So I want to use facet filter for that external grid with dynamic fields in filter. Can you please provide me with some example how can I achieve it. Also when I open facet filter it should show the filter options instead of external grid and after collapsing it should filter the resource in external grid and show the filtered resources.

for your reference this is the example https://bryntum.com/products/scheduler/examples/dragfromgrid/

Thanks,
Bharat

[alex.l]

Hi Bharat,

We do not code applications in bounds of forum support. We will be glad to help you if you have specific questions about API during your development, or we could create a solution for you as Professional Services (contact form is here https://bryntum.com/services/ ).

You can use filter to any source you want. Please check the demo code, it is very clear how apply filter to another source. Source code of all demos for any product might be found in sources of that product. You can download trial version for free and check demos.

when I open facet filter it should show the filter options instead of external grid and after collapsing it should filter the resource in external grid and show the filtered resources.

This is not clear to me. You want to show filters instead of grid? So what's the problem with that?
And you want to apply filters not right away but when you collapse the filter panel? Panel has an event https://bryntum.com/products/schedulerpro/docs/api/Core/widget/Panel#event-collapse that you can use to apply filter. How to apply filter is shown in demo we shared, please check the code and let us know if any questions during development.

[bharat95]

Hi,

I don't want code. I already checked few of the demos. I have scheduler with grid using splitter. So when I click on filter button in grid tbar it should hide grid resources and show filter options instead of resources and when I click apply or filter is collapsed, I want to display grid resources again. So I want to know how I can achieve this?

Thanks,
Bharat

[alex.l]

To hide one panel and show another panel, you can use https://bryntum.com/products/schedulerpro/docs/api/Core/widget/Panel#function-toggleCollapsed in your button handler.
You also can show filter panel above the resources grid, see https://bryntum.com/products/schedulerpro/docs/api/Core/widget/Widget#config-floating

[bharat95]

Hi,

Can I do it without using panel because I'm displaying grid using splitter? Also the button will be in tbar of grid, so how I can hide the grid and show filters.