[REACT] Dynamic messages based on search functionality

[ankamomkar]

 {
          type: 'container',
          style: 'margin-top:auto',
          width: 'min-content',
          items: [
            {
              style: 'margin-left:auto',
              type: 'text',
              cls: ' b-pool-search',
              triggers: {
                plug: {
                  cls: 'b-fa b-fa-search b-fieldtrigger',
                  align: 'start',
                },
              },
              listeners: {
                input(props: any) {
                  const { source, value } = props;
                  const { store } = source.up('grid');
                  console.log(store, 'store');
                  store.clearFilters();
                  store.filter((record: any) => record.Name.toLowerCase().includes(value.toLowerCase()));
                },
              },
            },
            {
              type: 'label',
              html: `<div><span class='labelResourceCountText'> ${intl.formatMessage({ id: 'Showing' })} ${
                poolsGridRows.length
              } ${intl.formatMessage({ id: 'Pools' })}</span></div>`,
            },
          ],
        },

By default i need to display this message
<span class='labelResourceCountText'> ${intl.formatMessage({ id: 'Showing' })} ${
poolsGridRows.length
} ${intl.formatMessage({ id: 'Pools' })}</span></div>
when i search anything in the search box then based on result if i got one value then i need to show Showing 1 out of 35 results this type of message
if i got 2 values then in place of 1 i need to see 2

[kronaemmanuel]

Hi there,

Since you're using React, you can do something like this:

    const scheduler = useRef(null);
    const [filterValue, setFilterValue] = useState({current: 0, total: 0});
    useEffect(() => {
        const instance =scheduler.current?.instance;

    if (instance) {
        // Set initial value
        instance.resourceStore.on('load', ({source}) => {
            setFilterValue({current: source.count, total: source.originalCount});
        })

        instance.resourceStore.on('filter', ({source}) => {
            setFilterValue({current: source.count, total: source.originalCount});
        })
    }
}, [])

And then you can use the value from filterValue. If you want to put it in a toolbar, you can do it like this:

                <BryntumLabel text={`Showing ${filterValue.current} of ${filterValue.total}`}/>

[kronaemmanuel]

Basically, inside the useEffect we are creating a listener which will call setFilterValue whenenver there is a successful filter event https://bryntum.com/products/scheduler/docs/api/Scheduler/data/ResourceStore#event-filter.

[ankamomkar]

{
          type: 'container',
          style: 'margin-top:auto',
          width: 'min-content',
          items: [
            {
              style: 'margin-left:auto',
              type: 'text',
              cls: ' b-pool-search',
              triggers: {
                plug: {
                  cls: 'b-fa b-fa-search b-fieldtrigger',
                  align: 'start',
                },
              },
              listeners: {
                input(props: any) {
                  const { source, value } = props;
                  const { store } = source.up('grid');
                  store.clearFilters();
                  store.filterBy((record: any) => record.Name.toLowerCase().includes(value.toLowerCase()));
                  const filteredRecordCount = store.getCount();
                  console.log('Number of filtered records:', filteredRecordCount);
                },
              },
            },
            {
              type: 'label',
              html: `<div><span class='labelResourceCountText'> ${intl.formatMessage({ id: 'Showing' })} ${
                poolsGridRows.length
              } ${intl.formatMessage({ id: 'Pools' })}</span></div>`,
            },
          ],
        },

Whatever the count is coming in filteredRecordCount that i need to come with this message
<div><span class='labelResourceCountText'> ${intl.formatMessage({ id: 'Showing' })} ${
poolsGridRows.length
} ${intl.formatMessage({ id: 'Pools' })}</span></div>`,
while loading I need to display the message something like showing 35 Results when i search anything based on result it should show showing 1 out of 35 results.

[alex.l]

Hi,

html is not reactive. You need to update it manually after getting required data. https://bryntum.com/products/gantt/docs/api/Core/widget/Container#property-html

[ankamomkar]

this issue has been solved