[REACT] To display a text dynamically based on the search happened.

[umeshaithu]

Hi Support,

I have a toolbar in grid with below items

tbar: [
        {
          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()));
                  filteredRecordCount = store.getCount();
                  console.log('Number of filtered records:', filteredRecordCount);
                },
              },
            },
            {
              type: 'label',
              html: `<div><span class='labelResourceCountText'> ${intl.formatMessage({
                id: 'Showing',
              })} ${filteredRecordCount} ${intl.formatMessage({ id: 'Pools' })}</span></div>`,
            },
          ],
        },
        ]

So whenever I try to search in the textfield my grid store count changes and I need to display the count down below the search textfield. So I need to display my label based on the count that present in the store whenever search happens. Is there anyway to make a communication between two tbar elements. Otherwise please help me on how to achieve it.

Thanks..

[Animal]

If you filter a store, UIs which map that store will change.

Use this instead: https://bryntum.com/products/grid/docs/api/Core/data/Store#function-query

[tasnim]

Hi,

Sure, Here are the steps to follow to do it.

First use type : 'widget' instead of label and add html as a function
And add a ref to the widget so it's easy to get from the widgetMap

                {
                    type: 'widget',
                    ref: 'label',
                    html: 'up.getHtml'
                }

And here is the function that returns the html

    getHtml(widget) {
        const grid = widget.up('grid');
        return `<div>Showing <span class='labelResourceCountText' style="color: tomato; font-weight:bold; font-size: 17px;">${grid.store.getCount()}</span> Records</div>`;
    }

Now you'd need to change the widget's html when the input field change

                {
                    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) {
                            const { source, value } = props;
                            const { store } = source.up('grid');
                            store.clearFilters();
                            store.filterBy((record) => record.name.toLowerCase().includes(value.toLowerCase()));
                            // Get the label widget
                            const { label } = source.up('container').widgetMap;
                            // Set the html with the updated count
                            label.html = `<div>Showing <span class='labelResourceCountText' style="color: tomato; font-weight:bold; font-size: 17px;">${store.getCount()}</span> Records</div>`;
                        },
                    },
                }

You can find the whole code with a live demo here in the codepen https://codepen.io/dv-auntik/pen/oNObZmy?editors=0010

Hope it helps

Best of luck ,
Tasnim

[umeshaithu]

Many thanks.. It helped