Our blazing fast Grid component built with pure JavaScript


Post by speedy059 »

I'm currently use VueJS 3 and the Composition API. I'm having a hard time getting the toolbar search filter to work.

I currently have this in my config:

 
tbar: [
    {
        type: 'text',
        ref: 'searchField',
        clearable: true,
        label: '<i class="b-icon b-icon-search"></i>',
        listeners: {
            change: onSearchFieldChange,
        }
    }
]
const grid = ref();
function onSearchFieldChange(val) {
	grid.value.features.search.search(val.value);
}

The documentation is all for VueJS 2.x centered around 'this'. What is the proper way of adding a search box in the toolbar of the table? When it calls the onSearchFieldChange function, it errors out since the grid.value.features.search.search(val.value) is not a function (i added ref=grid to the bryntum-grid component). How do you go about accessing the Grid functions like search()? Also noticed I'm not sure how to access other functions like export. Any ideas?


Post by Maxim Gorkovsky »

Hello.

What is the proper way of adding a search box in the toolbar of the table?

Your code snippet looks correct.

When it calls the onSearchFieldChange function, it errors out since the grid.value.features.search.search(val.value) is not a function (i added ref=grid to the bryntum-grid component). How do you go about accessing the Grid functions like search()? Also noticed I'm not sure how to access other functions like export. Any ideas?

We do not have demos for vue 3 yet. But it general it should be fairly simple to get reference to the vue component, try reading through guides? If you cannot figure the scope you can always try to lookup grid component from the listener:

onSearchFieldChange({ source, value }) { source.up('grid').features.search.search(value) }

Post by speedy059 »

Maxim Gorkovsky wrote: Wed Nov 17, 2021 2:59 pm

Hello.

What is the proper way of adding a search box in the toolbar of the table?

Your code snippet looks correct.

When it calls the onSearchFieldChange function, it errors out since the grid.value.features.search.search(val.value) is not a function (i added ref=grid to the bryntum-grid component). How do you go about accessing the Grid functions like search()? Also noticed I'm not sure how to access other functions like export. Any ideas?

We do not have demos for vue 3 yet. But it general it should be fairly simple to get reference to the vue component, try reading through guides? If you cannot figure the scope you can always try to lookup grid component from the listener:

onSearchFieldChange({ source, value }) { source.up('grid').features.search.search(value) }

I was able to access it using a computed property from the grid reference:

const gridInstance = computed(() => grid.value.instance.value);

Only issue now is that I see now is the actual searching isn't doing anything. I have a listener for "onSearchPerformed" and when it gets called, it returns and empty [] with no results. I checked the column and filterable is enabled with a filterFn.

{
                text: 'Name',
                field: 'user.lastName',
                autoWidth: true,
                renderer({record}) {
                    return nameFilters().studentName(record);
                },
                filterable : {
                    filterFn : ({ record, value }) => {
                        return record.user.lastName.toLowerCase().indexOf(value.toLowerCase()) !== -1 || record.user.firstName.toLowerCase().indexOf(value.toLowerCase()) !== -1
                    },
                    filterField : {
                        emptyText : 'Filter name'
                    }
                }
            }

Post by Maxim Gorkovsky »

Only issue now is that I see now is the actual searching isn't doing anything. I have a listener for "onSearchPerformed" and when it gets called, it returns and empty [] with no results. I checked the column and filterable is enabled with a filterFn.

Search is not related to filtering. I can see in our search example results are arriving to the listener. Please show how you setup listener and listener itself.


Post Reply