CODEWITHSUNDEEP
vmware-clarity
user2066464
user2066464

Reputation: 23

Clarity Datagrid Custom filter example

Does anyone have a complete example of a custom filter for the clarity datagrid? The custom filter documentation is lacking and I can't figure out how to get their example to work. Better yet, a stackblitz for the full datagrid demo would be amazing!

Upvotes: 2

Views: 6003

Answers (2)

hippeelee
hippeelee

Reputation: 1808

Edit 01/14/2022

Sorry, I moved some things around on stackblitz and we have updated the repo since this was written.

Here is where the custom filter lives for the demo: https://github.com/vmware/clarity/blob/angular/src/app/datagrid/utils/color-filter.ts

I'm not posting source code because there are 12 different files and some are pretty long (> 100 loc).

Here is a working reproduction of the full demo in the Clarity docs: https://stackblitz.com/edit/full-datagrid-demo

If you ever have questions about how a Clarity component works you can always dive into the source code for the demos we use for development and testing. Take a look here, I linked to the dev app we use for dev/testing so you know where I got the full datagrid code from. https://github.com/vmware/clarity/tree/master/src/dev/src/app

Upvotes: 0

Anonymous
Anonymous

Reputation: 31

Hope this helps:

1) My Field model field.ts

    export interface Field {
        field_nbr: number;
        fieldType: string;
        dataType: string; 
    }

2) Utility file util-filters.ts - 

    import {ClrDatagridStringFilterInterface} from "@clr/angular";

    //Models
    import { Field } from '../models/field';

    /**
    * Class for filtering Field metadata in datagrids on filterType property of model
    */
    export class FieldTypeFilter implements ClrDatagridStringFilterInterface<Field> {
    accepts(field: Field, search: string):boolean {
        return "" + field.fieldType == search
         || field.fieldType.toLowerCase().indexOf(search) >= 0;
        }
    }

3) model-component.html

    <clr-datagrid [(clrDgSingleSelected)]="singleSelected" [clDgRowSelection]="false">
    <clr-dg-column >             
        Field Type
        <clr-dg-string-filter [clrDgStringFilter]="fieldTypeFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column ><ng-container *clrDgHideableColumn="{hidden: false}">Data Type</ng-container></clr-dg-column>
    <clr-dg-placeholder>No matching fields found</clr-dg-placeholder>

    <clr-dg-row *clrDgItems="let field of allFields"  [clrDgItem]="field" (click)='openModal(field)'>
        <clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
        <clr-dg-cell>{{field.dataType}}</clr-dg-cell>
    </clr-dg-row>
    </clr-datagrid>

4) model-component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { NgIf } from '@angular/common';
    import { Wizard } from "@clr/angular";
import { Observable } from 'rxjs';

//Models
import { Field } from '../models/field';

//Utilities
import { FieldTypeFilter } from "../utils/field-filters";

@Component({
selector: 'model',
templateUrl: './model.component.html',
providers: [],
styleUrls: ['../app.component.css']
})

export class ModelComponent {
    private fieldTypeFilter = new FieldTypeFilter; 
    ....
}

Upvotes: 3

Related Questions