custom vaadin-grid filter for Polymer 1.0

Question

I’m using the vaadin-grid#^3.0.2 in my polymer 1.0 project.

But I’m looking to create an on/off toggle button that will filter a column based on if the text in two columns are not a match. So if a row in column 1 contains text=“1.1.1” and that same row in column 2 contains text = “2.1.1" then I would keep this row displayed, and hide all other rows. I want to do this in javscript. I’m very new to the vaadin-grid (had so much previous experience with iron-data-table). Anyone have a suggestion on how I can access the filter function?

image of 2 different columns of versions

I tried using the standard filter element but it's too limiting because it only allows me to do string based filtering on just one-specific column, but it's not built so I can do a comparison between strings in two different columns.

<vaadin-grid-filter path="version" value="[[_filterVersion]]">
 <input  value="{{_filterVersion::input}}">
</vaadin-grid-filter>

Answer 1

One simple way to do filtering that looks at the values of two columns is to not use vaadin-grid-filter, rather just have a input field outside the grid, then filter the array bound to the grid's items property as needed.

<vaadin-textfield on-value-changed="_filterMethod"></vaadin-textfield>

_filterMethod(evt) {
  this.gridItems = this.allItems.filter(it => it.col1 !== it.col2);
}

Although I may not fully understand your question as I don't why you are using an input field instead of a button. This filter method approach should work equally well if you call it from a button instead.