vaadin-grid how to control when filter input triggers the dataProvider function?

Question

I'm using Vaadin web components in a Polymer 3.0 app. Client-side Javascript only. No Flow, no Java backend. After updating web components from v14 to v24, vaadin-grid-filter's internal text field now immediately populates when the user enters a value into the filter's slotted vaadin-text-field. That automatically triggers a call to the dataProvider callback function. It doesn't happen automatically in v14. With v14 I have control over when the dataProvider is called.

Here's the updated code in vaadin-grid-filter showing the addition of a filter controller that appears to be the key to the change in behavior:

 static get observers() { return ['_filterChanged(path, value, _textField)']; } /** @protected */ ready() { super.ready(); this._filterController = new SlotController(this, '', 'vaadin-text-field', { initializer: (field) => { field.addEventListener('value-changed', (e) => { this.value = e.detail.value; }); this._textField = field; }, }); this.addController(this._filterController); }

I need to be able to wait for the user to press a search button before the dataProvider callback is called. This works as needed in v14. Is there a way to get it to work in v24?

Tatu Lund · Accepted Answer · 2023-05-16 05:48:18Z

I have not done that in exactly same scenario as you, but I have something similar in my Lit based Hilla demo app.

I am using vaadin-text-field declaratively and binding input event.

 <vaadin-text-field id="email" .value=${this.filterText} @input=${this.updateFilter} clear-button-visible > </vaadin-text-field>

And in my updateFilter function I am triggering vaadin-grid to refresh with clearCache function. This function will also trigger vaadin-grid to run the dataProvider callback.

 updateFilter(e: { target: HTMLInputElement }) { this.filterText = e.target.value; this.grid.clearCache(); // I think this is the thing you are looking for }

And I am then just using the filterText in my callback function.

Thanks, @Tatu Lund. Your example made me realize that, per column, I need vaadin-text-field but I don't need vaadin-grid-filter. Including it is what's causing clearCache() to be called as the user is typing. In v14, I was able to control when the vaadin-text-field's value was copied to vaadin-grid-filter. Now it happens in vaadin-grid-filter, as the user types, per the code snippet in my question above.

Collectives™ on Stack Overflow

vaadin-grid how to control when filter input triggers the dataProvider function?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related