Vaadin-grid-filter with dataProvider not working

February 18, 2021 by admin

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`
        <vaadin-grid
        id="grid" 
        .dataProvider=${this.dataProvider}
        >
        ${columns.map((column: Column) => html`<vaadin-grid-column width=${column.size} resizable path=${column.name} header="${column.alias}">
                <template class="header">
                    <vaadin-grid-sorter path=${column.name}>
                        <vaadin-grid-filter path="${column.name}">
                            <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>
                        </vaadin-grid-filter>
                    </vaadin-grid-sorter>
                </template>
            </vaadin-grid-column>`)}
    </vaadin-grid>`
    }

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

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=${column.name}>

  <vaadin-grid-filter path="${column.name}"
                      value="[[value]]"> <!-- 👈 Here -->

    <vaadin-text-field slot="filter"
                       title="${column.alias}"
                       placeholder=${column.alias}
                       value="{{value}}"> <!-- 👈 and here -->
    </vaadin-text-field>

  </vaadin-grid-filter>

</vaadin-grid-sorter>