DataGrid (Server side)

[chytashe]

Can anyone show an example of how they have added custom filtering to their server-side datagrid implementation.

See the image below for what we are trying to accomplish:

Here is some HTML:

<clr-dg-column *ngFor="let item of columnHeaders" class="dg-cell-titles width1"
               style="max-width: 550px;text-overflow: ellipsis;">
 
    <clr-dg-filter [clrDgFilter]="myFilter" *ngIf="item.header === 'Is Housing'">
<app-datagrid-filter #myFilter [filterColumnName]="'isHousing'"
                             [filterValues]="getfilterValues('isHousing')"></app-datagrid-filter>
</clr-dg-filter>
 
    <ng-template clrDgHideableColumn [(clrDgHidden)]="item.hidden"
                 (clrDgHiddenChange)="columnHiddenChanged($event, item.header)">
<span>{{ item.header }}</span>
</ng-template>
</clr-dg-column>

Here is some TypeScript tied to this component:

typescript

refresh(state: ClrDatagridStateInterface) {				
    this.pageNumber = state?.page?.current ?? this.currentPage;
    const pageChange = new pageChangeEvent();
    pageChange.pageNumber = state?.page?.current ?? this.currentPage;
    pageChange.pageSize = state?.page?.size ?? 10;
    this.totalItems = this.tableOptions.totalItems;
    this.currentPage = this.pageNumber;
    this.fetchDataEmit.emit(pageChange);
}

datagrid-filter.component.ts (child component code):

typescript

isActive(): boolean {       
    return this.selectedValues.length > 0;
}
 
accepts(item: any): boolean {
    let lowerCasedSelectedValues: string[] = this.selectedValues.map(str => str.toLowerCase());
    return lowerCasedSelectedValues.indexOf(item[this.filterColumnName]?.toLocaleLowerCase()) > -1;
}
 
toggleSelection(event: any) {
    if (event.target.checked) {
        this.selectedValues.push(event.target.value);
    } else {
        const filterValue = event.target.value;
        const index = this.selectedValues.indexOf(filterValue);
        if (index > -1) {
            this.selectedValues.splice(index, 1);
        }
    }
    this.changes.next(true);
}

In the below example, if I change clrDgItems to ngFor, it stops working (note this is for server-side datagrid implementation):

html

<clr-dg-row *clrDgItems="let data of tableOptions.dataset" [clrDgItem]="data" class="dg-row-data"
            (click)="(tableOptions.rowSelectable ? onClick($event, data) : 0)">
<clr-dg-row *ngFor="let data of tableOptions.dataset" [clrDgItem]="data" class="dg-row-data"
            (click)="(tableOptions.rowSelectable ? onClick($event, data) : 0)">```

[kevinbuhmann]

In your refresh event handler, you need to filter the collection that is being iterated.

https://clarity.design/documentation/datagrid/code/server-driven