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`
        <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”

  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=${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>
    
    Reply

Leave a Comment