Clarity: how to use Custom Filters in angular2

[dragon503]

Select one ... (check one with "x")

[ ] bug
[ x ] feature request
[ ] enhancement

Expected behavior

how to use Custom Filters in angular2.
In dategrid i want a dropdown filter like demo color-filter.

Actual behavior

I follow the code of document but can't work,
only import clarity-angular?
what's User type from?
what's Subject?
and what's the function of changes, isActive(), acceptes()?
expecting detail document of how to use it. Thanks!'
the code in https://vmware.github.io/clarity/documentation/datagrid/custom-filtering

import {Filter} from "clarity-angular";

@Component({
    selector: "color-filter",
    /* The rest of the filter component's declaration */
})
class ColorFilter implements Filter<User> {
    changes = new Subject<any>();
    isActive(): boolean { /* ... */ }
    accepts(user: User) { /* ... */ }
}

Reproduction of behavior

• Include a link to the reproduction scenario you created by forking one of the Clarity Plunker Templates:
  
  

Environment details

• Angular version: 2.0.X

• *Clarity version:0.8.9*

• OS and version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[mathisscott]

@dragon503 :
The Filter that you are importing from clarity is an _interface_. I don't know if you are familiar with things like OnInit or AfterViewInit in Angular but it's a similar sort of thing.

So changes, isActive, and accepts are all part of the interface you are implementing using the implements keyword in your class ColorFilter.

The docs on Clarity are pretty straightforward on this topic. Perhaps you could look into Angular docs or Typescript docs to help understand what's going on here?

If you could submit plunkr: https://plnkr.co/8TwwdL reproducing what you are trying to do, we might be able to steer you in the right direction.

[dragon503]

@mathisscott :+1:
Thank you very much.
I have solved my issue.
I cloned the clarity project from here and look into the source, That help me a lot.Thanks.

[mathisscott]

@dragon503: happy to hear that.

[BlakeDraper]

@mathisscott With respect, I disagree that the Clarity docs are straightforward on this topic. The actual docs page has a lot of ... placeholders where the code should actually be. I am having a hard time getting a working custom filter and I have perused the color filter src in this repo.
I can get my custom filter component to show up on filter icon click and pass back an array of selected items (it's a multiselect), but I cannot figure out how those values pass back to the datagrid and actually filter the column.
I am attempting to create a plunker to demonstrate, but running into a myriad of datagrid issues getting even that plunkr working. Can anyone on the Clarity team provide an example of a custom filter, or at least a hint in the right direction? Been stuck on this for a couple days now and there just isn't much support out there in the usual sources.

[mathisscott]

@BlakeDraper : Color filter is not a good one to try to dive into. To wrap your head around this, you'll need to understand Typescript interfaces (because that is what a filter is in this case) and make sure you have an accepts() method that returns a boolean to perform the filtering.

Here's an example: https://github.com/vmware/clarity/blob/new-website/src/app/documentation/demos/datagrid/utils/pokemon-filter.ts

I will circle back with the team to discuss the clarity of the documentation on this feature.

[BlakeDraper]

@mathisscott Thanks for the response to my somewhat rambling comment. I will look at the example you share with fresh eyes, and dig deeper into Interfaces (I use them in my app extensively, but really just to strongly type my objects). FYI, all I am really after is a pick-list style filter component. I submitted the request here as #1175 . In the meantime I'll try to make headway. Thanks.

[jeeyun]

Hi @BlakeDraper take a look at this example and see if it helps you in implementing your own custom filter:
https://plnkr.co/edit/n8ZRKq9MI8UaNBA3U3ed?p=preview

In this example, I categorized "regular" users as those with ID's < 10000 and "elite" users as those with ID's > 10000. Let me know if there's anything else we can do to help!

[BlakeDraper]

@jeeyun Thanks very much! Your plunkr did help me to get where I needed to be.

[jericdeleon]

As an incoming new user of Clarity, I also wish to pitch in that I found the current documentation on Custom Filters lacking (a lot of ...s); but @jeeyun's Plunkr was clear enough to give direction so all was good in the end (I had to search for this issue, though)

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.