Vaadin-grid-filter with dataProvider not working

I try filter data by vaadin-grid-filter. When sorting dataProvider is refreshing but when I try filter input not work…

    gridTemplate(columns: any){
        return html`
        ${ Column) => html`<vaadin-grid-column width=${column.size} resizable path=${} header="${column.alias}">
                <template class="header">
                    <vaadin-grid-sorter path=${}>
                        <vaadin-grid-filter path="${}">
                            <vaadin-text-field slot="filter" title="${column.alias}" placeholder=${column.alias} 
                            @input=${(e:any) => {console.log("Test INPUT")}}
                            @change=${(e: any) => (console.log("Test CHANGE"))}
                            @value-changed=${(e:any) => (console.log("Test VALUE-CHANGE"))}></vaadin-text-field>

23 thoughts on “Vaadin-grid-filter with dataProvider not working”

  1. If you want to use a custom text field for vaadin-grid-filter you’ll have to re-enable the binding of the value between vaadin-text-field and vaadin-grid-filter. This can be done using Polymer’s binding syntax in the template:

    <vaadin-grid-sorter path=${}>
      <vaadin-grid-filter path="${}"
                          value="[[value]]"> <!-- 👈 Here -->
        <vaadin-text-field slot="filter"
                           value="{{value}}"> <!-- 👈 and here -->

Leave a Comment