How to filter only the rows containing the keyed in data and not its Parent item

385

Manikanta Vundavalli posted over 2 years ago

Hi,

I have a scenario where I need to filter the rows based on column value and only filter the rows having the keyed in or selected value but with the current filter behavior as shown below on Apply click after choosing one value from the filter list (101) its parent item is also getting filtered and is visible in the grid. Is there a way to filter rows having 101 value only and not their parent items?

Thanks,

Mani

640

Offline Viktor Kombov posted over 2 years ago

Hello Mani,

Thank you for posting in our community.

At this point, we do not provide hiding the parent item of the filtered row out of the box. What I can suggest for achieving your requirement is using a custom filter strategy. You can do this by setting filterStrategy input of the Tree Grid to your own custom strategy in order to make the grid to render only the filtered records:

HTML

<igx-tree-grid [data]="data primaryKey="ID" foreignKey="ParentID"
   [filterStrategy]="customFilterStrategy"
>
...
</igx-grid>

TYPESCRIPT

    …
export class TreeGridFormattedFilteringStrategyComponent implements OnInit {
    …
    public customFilterStrategy = new CustomFilteringStrategy();
    …
}
…
export class CustomFilteringStrategy extends TreeGridFilteringStrategy {
    public filter(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
        advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[] {
        return this.customFilterImpl(data, expressionsTree, advancedExpressionsTree, undefined, grid);
    }

    private customFilterImpl(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
        advancedExpressionsTree: IFilteringExpressionsTree, parent: ITreeGridRecord, grid?: GridType): ITreeGridRecord[] {
        let rec: ITreeGridRecord;
        const res: ITreeGridRecord[] = [];
        …
        if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
            res.push(rec);
        } else if (rec.children && rec.children.length > 0) {
            rec = this.setCorrectLevelToFilteredRecords(rec);
            res.push(...rec.children);
        }
        ….
        return res;
    }
    …
}

I created a small sample illustrating my suggestion, which you can find here. Please keep in mind that this suggestion is a workaround and it is not fully tested, so it is possible to encounter any edge cases for some scenarios. Please test it on your side and let me know whether you find it helpful.

Additionally, If you would like to see this feature implemented as part or out product I could suggest submitting a new feature request in our GitHub repository here.

Regards,

Viktor Kombov

Entry Level Software Developer

Infragistics, Inc.

385

Offline Manikanta Vundavalli posted over 2 years ago in reply to Viktor Kombov

Hello Viktor,

Thank you for the reply. I need the following scenario. Currently, it is filtering all the rows.

If I have nested row groups like

A

B

C

A1

B1

C1

Always the Level 0 like A, A1 rows should be fixed and filtering should happen only on the level 1 and 2 rows like B, c and B1, C1.

Thank you in Advance!

Thank you,

Mani
Cancel
Reply

Cancel

640

Offline Viktor Kombov posted over 2 years ago in reply to Manikanta Vundavalli

Hello Mani,

Your second requirement can be achieved if the custom filtering strategy is set to return the root level parents of the filtered records as in the following example:

TYPESCRIPT

export class CustomFilteringStrategy extends TreeGridFilteringStrategy {
    private customFilterImpl(
        data: ITreeGridRecord[],
        expressionsTree: IFilteringExpressionsTree,
        advancedExpressionsTree: IFilteringExpressionsTree,
        parent: ITreeGridRecord,
        grid?: GridType
    ): ITreeGridRecord[] {
        …
        if (
            this.matchRecord(rec, expressionsTree, grid) &&
            this.matchRecord(rec, advancedExpressionsTree, grid)
        ) {
            res.push(rec);
        } else if (rec.children && rec.children.length > 0) {
            if (rec.level === 0) {
                rec.isFilteredOutParent = true;
                res.push(rec);
            } else {
                rec = this.setCorrectLevelToFilteredRecords(rec);
                res.push(...rec.children);
            }
        }
        return res;
    }
    …
}

I have updated the previously provided sample to illustrate my suggestion. Please test it on your side and let me know whether you find it helpful.

Regards,
Viktor Kombov
Entry level Software Developer
Infragistics, Inc.

385

Offline Manikanta Vundavalli posted over 2 years ago in reply to Viktor Kombov

Hello Viktor,

Thank you for the response and it works as expected.

Is there an event that gets triggered when I click on the more-vert (filter) icon so that I can collapse all the rows for one of my pending scenarios?

Thanks,

Mani
Cancel
Reply

Cancel
640

Offline Viktor Kombov posted over 2 years ago in reply to Manikanta Vundavalli
Hello Mani,

There is not an event that you can handle when you are clicking over the Excel style filtering icon. However, you can re-template the Excel style filtering icon using the igxExcelStyleHeaderIcon directive and then to handle its click event:

HTML

<ng-template igxExcelStyleHeaderIcon > <igx-icon [ngClass]="treeGrid.filterIconClassName" (click)="clickHandler()">more_vert</igx-icon> </ng-template>

I created a small sample illustrating my suggestion, which you can find here. Please test it on your side and let me know whether you find it helpful.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.
Cancel
Reply

Cancel