The Ignite UI for Web Components Filtering in Web Components Tree Grid is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the IgcTreeGridComponent Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-tree-gridauto-generate="false"name="treeGrid"id="treeGrid"id="treeGrid"filter-mode="quickFilter"primary-key="ID"foreign-key="ParentID"allow-filtering="true"><igc-columnfield="ID"header="Order ID"data-type="number"></igc-column><igc-columnfield="Name"header="Order Product"data-type="string"></igc-column><igc-columnfield="Category"data-type="string"></igc-column><igc-columnfield="Units"data-type="number"></igc-column><igc-columnfield="Age"data-type="number"sortable="true"hidden="true"></igc-column><igc-columnfield="UnitPrice"header="Unit Price"data-type="currency"></igc-column><igc-columnfield="Price"data-type="currency"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column><igc-columnfield="Delivered"data-type="boolean"></igc-column></igc-tree-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
You can enable both the QuickFilter or ExcelStyleFilter and the advanced filtering user interfaces in the IgcTreeGridComponent. Both filtering user interfaces will work independently of one another. The final filtered result in the IgcTreeGridComponent is the intersection between the results of the two filters.
Interaction
In order to open the filter row for a particular column, the 'Filter' chip below its header should be clicked. To add conditions you should choose filter operand using the dropdown on the left of the input and enter value. For number and date columns 'Equals' is selected by default, for string - 'Contains' and for boolean - 'All'. Pressing 'Enter' confirms the condition and you are now able to add another one. There is a dropdown, between 'condition' chips, which determines the logical operator between them, 'AND' is selected by default. To remove a condition you can click the 'X' button of the chip, and to edit it you should select the chip and the input will be populated with the chip's data. While filter row is opened you can click on any filterable column's header in order to select it and to be able to add filter conditions for it.
While some filtering conditions have been applied to a column, and the filter row is closed, you can either remove the conditions by clicking the chip's close button, or you can open the filter row by selecting any of the chips. When there is not enough space to show all the conditions, a filter icon is shown with a badge that indicates how many more conditions there are. It can also be clicked in order to open the filter row.
Usage
There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The IgcTreeGridComponent currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set dataType of the column, the correct set of filtering operations is loaded inside the filter UI dropdown. Additionally, you can set the IgnoreCase and the initial Condition properties.
The filtering feature is enabled for the IgcTreeGridComponent component by setting the allowFiltering input to true. The default filterMode is QuickFilter and it cannot be changed run time. To disable this feature for a certain column – set the filterable input to false.
If values of type string are used by a column of data type date, the IgcTreeGridComponent won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.
// Single column filtering// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring casethis.grid.filter('ProductName', 'myproduct', IgcStringFilteringOperand.instance().condition('contains'), true);
typescript
The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions.
The filtering operation DOES NOT change the underlying data source of the IgcTreeGridComponent.
filterGlobal - clears all existing filters and applies the new filtering condition to all Tree Grid's columns.
// Filter all cells for a value which contains `myproduct`this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false);
typescript
clearFilter - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns.
// Remove the filtering state from the ProductName columnthis.grid.clearFilter('ProductName');
// Clears the filtering state from all columnsthis.grid.clearFilter();
typescript
The default value of AND returns only the rows that match all the currently applied filtering expressions. Following the example above, a row will be returned when both the 'ProductName' cell value contains 'myproduct' and the 'Price' cell value is greater than 55.
When set to OR, a row will be returned when either the 'ProductName' cell value contains 'myproduct' or the 'Price' cell value is greater than 55.
In the sample below, inspect the “Product Name” and “Discontinued” columns filters menus. For the “Discontinued” column filter, we have limited the number of operands to All, True and False. For the “Product Name” column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="container fill"><igc-tree-gridauto-generate="false"name="treeGrid"id="treeGrid"id="treeGrid"filter-mode="quickFilter"primary-key="ID"foreign-key="ParentID"allow-filtering="true"><igc-columnfield="ID"header="Order ID"data-type="number"></igc-column><igc-columnfield="Name"id="name"header="Order Product"data-type="string"></igc-column><igc-columnfield="Category"data-type="string"></igc-column><igc-columnfield="Units"data-type="number"></igc-column><igc-columnfield="Age"data-type="number"sortable="true"hidden="true"></igc-column><igc-columnfield="UnitPrice"header="Unit Price"data-type="currency"></igc-column><igc-columnfield="Price"data-type="currency"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column><igc-columnfield="Delivered"id="delivered"data-type="boolean"></igc-column></igc-tree-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties.
In case you would like to change some of the colors, you need to set a class for the grid first:
<igc-tree-gridclass="grid"></igc-tree-grid>html
Then set the related CSS properties for that class:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-tree-gridauto-generate="false"name="treeGrid"id="treeGrid"id="treeGrid"filter-mode="quickFilter"primary-key="ID"foreign-key="ParentID"allow-filtering="true"><igc-columnfield="ID"header="Order ID"data-type="number"></igc-column><igc-columnfield="Name"header="Order Product"data-type="string"></igc-column><igc-columnfield="Category"data-type="string"></igc-column><igc-columnfield="Units"data-type="number"></igc-column><igc-columnfield="Age"data-type="number"sortable="true"hidden="true"></igc-column><igc-columnfield="UnitPrice"header="Unit Price"data-type="currency"></igc-column><igc-columnfield="Price"data-type="currency"></igc-column><igc-columnfield="Country"data-type="string"sortable="true"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column><igc-columnfield="Delivered"data-type="boolean"></igc-column></igc-tree-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.