Before reading this, you should make sure you read the previous section on custom filters. Done? Then you might be a bit overwhelmed by the complexity of custom filters, understandably. What if you want just a bit more than default string value filters, but phenomenal cosmic filter power turns out to be slightly overkill? This is where our built-in custom filters come handy. They let you customize specific parts of the filter like the string matching function, without having to rewrite the whole thing yourself from two-way binding inputs to integration in the datagrid.
At the moment, the only built-in filter we provide is the "string" filter one, meaning the user is offered a text input, and the rows will be filtered based on a string-matching function you provide. You should now be familiar with our use of interfaces for this, so here is the interface your string matcher should implement:
Once you have it, you simply need to pass it to a
<clr-dg-string-filter>
component.
In our example, we can allow the user to filter not only by pokemon name, but also by entering the exact number of the pokemon he's interested in.
If you want to pre-filter your datagrid you can pass in a string to the
clrFilterValue
. For example:
myFilterValue1
has a value of
{{ myFilterValue1 ? myFilterValue1 : 'no value' }}
which gets passed into the
clr-dg-column
for the name column.
myFilterValue2
has a value of
{{ myFilterValue2 ? myFilterValue2 : 'no value' }}
which gets passed into the
clr-dg-string-filter
for the Pokemon column.