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..