diff --git a/CHANGELOG.md b/CHANGELOG.md
index aad053d3b20..561715afb14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,9 @@ All notable changes for each version of this project will be documented in this
 
     - For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/pivot-grid/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/igxPivotGrid-Specification) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid).
 
+- `IgxTreeGrid`
+    - Added support for tree filter items in the Excel Style filtering UI. Use the `TreeGridFilteringStrategy` constructor to specify which columns should display tree filter items.
+
 - `igxTooltipTarget` directive now allows specifying a plain text tooltip without adding an additional DOM element decorated with the `igxTooltip` directive. This is achieved via the newly introduced `tooltip` string input.
     ```html
     <button igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">
@@ -36,6 +39,7 @@ All notable changes for each version of this project will be documented in this
         <igx-column field="Age"></igx-column>
     </igx-grid>
    ```
+   - **Breaking Change** - `getFilterItems` method is added to the `IFilteringStrategy` interface. Using the new method you could retrieve either list or tree filter items to be displayed for a column in the Excel Style filtering UI. If you have your own implementation of the `IFilteringStrategy` interface, you will need to implement the new method. Otherwise, you could derive from the `BaseFilteringStrategy` class or any of its sub-classes, which already implement the new method.
    - Exposed `dataChanging` and `dataChanged` events for the three grids that are re-emits of the corresponding `IgxForOf` events. These indicate the beginning and end of the input change triggering the actual data re-rendering which happens each time the data view changes. This happens after changes in either the data the grid is bound or the state affecting the operations which alter this data (e.g. sorting, filtering, group-by).
    - Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls.
 
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts
index b962412b3b6..f760efbd355 100644
--- a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsBG_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Булев филтър',
     igx_grid_excel_currency_filter: 'Филтър по валута',
     igx_grid_excel_custom_filter: 'Персонализиран филтър...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Разширено филтриране',
     igx_grid_advanced_filter_and_group: '"And" група',
     igx_grid_advanced_filter_or_group: '"Or" група',
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts
index 13c41d5d7a0..129dcc00215 100644
--- a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsCS_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Booleovský filtr',
     igx_grid_excel_currency_filter: 'Filtr měn',
     igx_grid_excel_custom_filter: 'Vlastní filtr ...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Pokročilé filtrování',
     igx_grid_advanced_filter_and_group: '"A" skupina',
     igx_grid_advanced_filter_or_group: '"Nebo" skupina',
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts
index b69f3921cc0..41cdf64f7e6 100644
--- a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsDA_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Boolsk filter',
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Brugerdefineret filter',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Avanceret filtrering',
     igx_grid_advanced_filter_and_group: '"Og" gruppe',
     igx_grid_advanced_filter_or_group: '"Eller" gruppe',
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts
index 697fefb1f9b..aeedfcc9e49 100644
--- a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsDE_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Logischer Filter',
     igx_grid_excel_currency_filter: 'Währungs Filter',
     igx_grid_excel_custom_filter: 'Benutzerdefinierter Filter...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Erweiterte Filterung',
     igx_grid_advanced_filter_and_group: '"Und" Gruppe',
     igx_grid_advanced_filter_or_group: '"Oder" Gruppe',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts
index 141f43624df..86f78e5e2dd 100644
--- a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsES_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Filtro booleano',
     igx_grid_excel_currency_filter: 'Filtro divisa',
     igx_grid_excel_custom_filter: 'Filtro personalizado...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Filtro Avanzado',
     igx_grid_advanced_filter_and_group: 'Grupo "Y"',
     igx_grid_advanced_filter_or_group: '"Grupo "O"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts
index 6318fa37bec..036a12a1003 100644
--- a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsFR_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Filtre booléen',
     igx_grid_excel_currency_filter: 'Filtre devise',
     igx_grid_excel_custom_filter: 'Filtre personnalisé...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Filtrage avancé',
     igx_grid_advanced_filter_and_group: 'Groupe "Et"',
     igx_grid_advanced_filter_or_group: 'Groupe "Ou"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts
index 433e8c35955..3e358e9bddc 100644
--- a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsHU_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Logikai szűrő',
     igx_grid_excel_currency_filter: 'Pénznemszűrő',
     igx_grid_excel_custom_filter: 'Egyéni szűrő...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Speciális szűrés',
     igx_grid_advanced_filter_and_group: '"És" csoport',
     igx_grid_advanced_filter_or_group: '"Vagy" Csoport',
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts
index f8d7f7a4a92..1c27e425c5f 100644
--- a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsIT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Filtro booleano',
     igx_grid_excel_currency_filter: 'Filtro valuta',
     igx_grid_excel_custom_filter: 'Filtro personalizzato…',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Filtro avanzato',
     igx_grid_advanced_filter_and_group: 'Gruppo "And"',
     igx_grid_advanced_filter_or_group: 'Gruppo "Or"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts
index cd3a2e8056f..d9d581db415 100644
--- a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsJA_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'ブール値フィルター',
     igx_grid_excel_currency_filter: '通貨フィルター',
     igx_grid_excel_custom_filter: 'カスタム フィルター...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: '高度なフィルター',
     igx_grid_advanced_filter_and_group: '"And" グループ',
     igx_grid_advanced_filter_or_group: '"Or" グループ',
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts
index a181899d28b..420b0d1e057 100644
--- a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsKO_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: '불린 필터',
     igx_grid_excel_currency_filter: '통화 필터',
     igx_grid_excel_custom_filter: '사용자 필터...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: '고급 필터링',
     igx_grid_advanced_filter_and_group: '그룹 "그리고"',
     igx_grid_advanced_filter_or_group: '그룹 "또는"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts
index 8c2bbeeaaa0..8c51b9f9740 100644
--- a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsNB_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Boolsk filter',
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Tilpasset filter...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Avansert filtrering',
     igx_grid_advanced_filter_and_group: '"Og"-gruppe',
     igx_grid_advanced_filter_or_group: '"Eller"-gruppe',
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts
index 70c87ade8a7..9873f5d9f53 100644
--- a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsNL_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Booleaans filter',
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Aangepast filter ...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Geavanceerd filteren',
     igx_grid_advanced_filter_and_group: 'En-groep',
     igx_grid_advanced_filter_or_group: 'Of-groep',
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts
index 9a181b3694f..58024ad3c65 100644
--- a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsPL_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Filtr logiczny',
     igx_grid_excel_currency_filter: 'Filtr walutowy',
     igx_grid_excel_custom_filter: 'Filtr niestandardowy...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Zaawansowane filtrowanie',
     igx_grid_advanced_filter_and_group: '"I" grupuj',
     igx_grid_advanced_filter_or_group: '"Lub" grupuj',
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts
index 44208c0ff49..2523c2cd6a5 100644
--- a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsPT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Filtro booleano',
     igx_grid_excel_currency_filter: 'Filtro de moeda',
     igx_grid_excel_custom_filter: 'Filtro personalizado...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Filtragem avançada',
     igx_grid_advanced_filter_and_group: '"E" grupo',
     igx_grid_advanced_filter_or_group: '"Ou" grupo',
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts
index a30c71cc2cb..6af7e368e91 100644
--- a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsRO_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Filtru boolean',
     igx_grid_excel_currency_filter: 'Filtru valutar',
     igx_grid_excel_custom_filter: 'Filtru customizat...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Filtrare avansată',
     igx_grid_advanced_filter_and_group: '"Și" Grup',
     igx_grid_advanced_filter_or_group: '"Sau" grup',
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts
index 24f72c0a06a..d5dc7b18c65 100644
--- a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsSV_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Booleskt filter',
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Anpassat filter ...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Avancerad filtrering',
     igx_grid_advanced_filter_and_group: '"Och" -grupp',
     igx_grid_advanced_filter_or_group: '"Eller" -grupp',
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts
index 41d16711ff2..64bc33df683 100644
--- a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts
@@ -89,6 +89,7 @@ const GridResourceStringsTR_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: 'Boole filtresi',
     igx_grid_excel_currency_filter: 'Para birimi filtresi',
     igx_grid_excel_custom_filter: 'Özel filtre...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Gelişmiş Filtreleme',
     igx_grid_advanced_filter_and_group: '"Ve" Grubu',
     igx_grid_advanced_filter_or_group: '"Veya" Grubu',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts
index 35933f955e1..a3921250eb6 100644
--- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsZHHANS_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: '布尔筛选器',
     igx_grid_excel_currency_filter: '货币筛选器',
     igx_grid_excel_custom_filter: '自定义筛选器...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: '高级筛选',
     igx_grid_advanced_filter_and_group: '"And" 组',
     igx_grid_advanced_filter_or_group: '"Or" 组',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts
index b343e4d633f..dc233d98546 100644
--- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts
+++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts
@@ -87,6 +87,7 @@ const GridResourceStringsZHHANT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_boolean_filter: '布林值篩選條件',
     igx_grid_excel_currency_filter: '貨幣篩選條件',
     igx_grid_excel_custom_filter: '自訂篩選條件...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: '進階篩選',
     igx_grid_advanced_filter_and_group: '“And” 群組',
     igx_grid_advanced_filter_or_group: '“Or” 群組',
diff --git a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts
index 4581e0a530b..e3fce5f7bfd 100644
--- a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts
+++ b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts
@@ -86,6 +86,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_boolean_filter?: string;
     igx_grid_excel_currency_filter?: string;
     igx_grid_excel_custom_filter?: string;
+    igx_grid_excel_no_matches?: string;
     igx_grid_advanced_filter_title?: string;
     igx_grid_advanced_filter_and_group?: string;
     igx_grid_advanced_filter_or_group?: string;
@@ -244,6 +245,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_boolean_filter: 'Boolean filter',
     igx_grid_excel_currency_filter: 'Currency filter',
     igx_grid_excel_custom_filter: 'Custom filter...',
+    igx_grid_excel_no_matches: 'No matches',
     igx_grid_advanced_filter_title: 'Advanced Filtering',
     igx_grid_advanced_filter_and_group: '"And" Group',
     igx_grid_advanced_filter_or_group: '"Or" Group',
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
index 49ce69b4d1c..df5f22e8355 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
@@ -17,6 +17,22 @@
             @extend %igx-excel-filter__loading !optional;
         }
 
+        @include e(tree) {
+            @extend %igx-excel-filter__tree !optional;
+        }
+
+        @include e(empty) {
+            @extend %igx-excel-filter__empty !optional;
+        }
+
+        @include e(tree-alike) {
+            @extend %igx-excel-filter__tree-alike !optional;
+        }
+
+        @include e(tree-alike-item) {
+            @extend %igx-excel-filter__tree-alike-item !optional;
+        }
+
         @include e(menu) {
             @extend %grid-excel-menu !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
index 1b4f8a27220..f3b29d272c8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -3,6 +3,7 @@
 @use '../../themes/schemas/dark' as *;
 @use '../button-group/button-group-component' as *;
 @use '../button-group/button-group-theme' as *;
+@use '../tree/tree-theme' as *;
 @use 'sass:map';
 
 ////
@@ -23,6 +24,24 @@
     $variant: map.get($theme, 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
 
+    $tree-node-indent: (
+        comfortable: rem(16px),
+        cosy: rem(8px),
+        compact: rem(4px)
+    );
+
+    $tree-node-expander-size: rem(20px);
+    $tree-node-height: (
+        comfortable: rem(40px),
+        cosy: rem(32px),
+        compact: rem(24px)
+    );
+
+    $checkbox-indent: (
+        comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}),
+        cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}),
+        compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}),
+    );
 
     %grid-excel-filter {
         display: block;
@@ -91,6 +110,22 @@
             $item-selected-border-color: transparent
         ));
 
+
+        @include tree(tree-theme(
+            $background: color($palette, 'surface'),
+            $background-selected: color($palette, 'surface'),
+            $background-active: color($palette, 'surface'),
+            $background-active-selected: color($palette, 'surface'),
+            $foreground: contrast-color($palette, 'surface'),
+            $foreground-selected: contrast-color($palette, 'surface'),
+            $foreground-active: contrast-color($palette, 'surface'),
+            $foreground-active-selected: contrast-color($palette, 'surface'),
+        ));
+
+        .igx-tree-node__wrapper {
+            padding: 0;
+        }
+
         igx-chips-area  {
             padding: rem(16px) rem(16px) 0 rem(16px);
             gap: rem(8px);
@@ -242,6 +277,12 @@
         pointer-events: none;
     }
 
+    %igx-excel-filter__empty {
+        display: grid;
+        place-items: center;
+        height: 100%;
+    }
+
     %grid-excel-main {
         display: flex;
         flex-direction: column;
@@ -250,13 +291,16 @@
         padding: rem(16px);
         gap: rem(16px);
 
-
         igx-list {
             flex-grow: 1;
             overflow: hidden;
             margin-left: -#{rem(16px)};
             margin-right: -#{rem(16px)};
             border: 0;
+        }
+
+        igx-list,
+        %igx-excel-filter__tree {
             @if $bootstrap-theme {
                 border-top: 1px dashed color($palette, 'grays', 100);
                 border-bottom: 1px dashed color($palette, 'grays', 100);
@@ -265,6 +309,53 @@
                 border-bottom: 1px dashed color($palette, 'grays', 300);
             }
         }
+
+        %igx-excel-filter__tree {
+            background: color($palette, 'surface');
+            overflow-y: auto;
+            margin: 0 rem(-16px);
+            flex: 1;
+
+            igx-icon {
+                width: $tree-node-expander-size;
+                height: $tree-node-expander-size;
+                font-size: $tree-node-expander-size;
+            }
+
+            > igx-checkbox,
+            .igx-tree-node__wrapper {
+                height: map.get($tree-node-height, 'comfortable');
+                min-height: map.get($tree-node-height, 'comfortable');
+            }
+
+            .igx-tree-node__toggle-button {
+                min-width: rem(20px);
+                margin-left: map.get($tree-node-indent, 'comfortable');
+            }
+        }
+
+        %igx-excel-filter__tree-alike {
+            background: color($palette, 'surface');
+            display: flex;
+            flex-direction: column;
+            z-index: 1;
+        }
+
+        %igx-excel-filter__tree-alike-item {
+            display: flex;
+            align-items: center;
+            height: map.get($tree-node-height, 'comfortable');
+            background: color($palette, 'surface');
+
+            &:hover,
+            &:focus {
+                background: color($palette, 'grays', 200);
+            }
+
+            > igx-checkbox {
+                margin-left: map.get($checkbox-indent, 'comfortable');
+            }
+        }
     }
 
     %grid-excel-menu--cosy {
@@ -302,6 +393,28 @@
             margin-left: -#{rem(8px)};
             margin-right: -#{rem(8px)};
         }
+
+        %igx-excel-filter__tree {
+            margin: 0 rem(-8px);
+
+            > igx-checkbox,
+            .igx-tree-node__wrapper {
+                height: map.get($tree-node-height, 'cosy');
+                min-height: map.get($tree-node-height, 'cosy');
+            }
+
+            .igx-tree-node__toggle-button {
+                margin-left: map.get($tree-node-indent, 'cosy');
+            }
+        }
+
+        %igx-excel-filter__tree-alike-item {
+            height: map.get($tree-node-height, 'cosy');
+
+            > igx-checkbox {
+                margin-left: map.get($checkbox-indent, 'cosy');
+            }
+        }
     }
 
     %grid-excel-menu--compact {
@@ -348,6 +461,28 @@
             margin-left: -#{rem(4px)};
             margin-right: -#{rem(4px)};
         }
+
+        %igx-excel-filter__tree {
+            margin: 0 rem(-4px);
+
+            igx-checkbox,
+            .igx-tree-node__wrapper {
+                height: map.get($tree-node-height, 'compact');
+                min-height: map.get($tree-node-height, 'compact');
+            }
+
+            .igx-tree-node__toggle-button {
+                margin: 0 map.get($tree-node-indent, 'compact');
+            }
+        }
+
+        %igx-excel-filter__tree-alike-item {
+            height: map.get($tree-node-height, 'compact');
+
+            > igx-checkbox {
+                margin-left: map.get($checkbox-indent, 'compact');
+            }
+        }
     }
 
     %grid-excel-menu__secondary {
diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
index 6dcf68d6b30..d6813674dee 100644
--- a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
+++ b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
@@ -7,7 +7,7 @@ import { DataUtil } from './data-util';
 import { IGroupByResult } from './grouping-result.interface';
 import { IGroupingState } from './groupby-state.interface';
 import { IGroupByRecord } from './groupby-record.interface';
-import { FilteringStrategy } from './filtering-strategy';
+import { FilteringStrategy, FilterUtil } from './filtering-strategy';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from './filtering-expressions-tree';
 import { IFilteringState } from './filtering-state.interface';
 import { FilteringLogic } from './filtering-expression.interface';
@@ -355,7 +355,7 @@ const testFilter = () => {
                     searchVal: 3
                 }
             ];
-            const res = DataUtil.filter(data, state);
+            const res = FilterUtil.filter(data, state);
             expect(dataGenerator.getValuesForColumn(res, 'number'))
                 .toEqual([4]);
         });
@@ -384,12 +384,12 @@ const testFilter = () => {
                 }
             ];
 
-            let res = DataUtil.filter(data, state);
+            let res = FilterUtil.filter(data, state);
             expect(dataGenerator.getValuesForColumn(res, 'number'))
                 .toEqual(dataGenerator.getValuesForColumn(data, 'number'));
             (res[0] as { string: string }).string = 'ROW';
             // case-sensitive
-            res = DataUtil.filter(res, stateIgnoreCase);
+            res = FilterUtil.filter(res, stateIgnoreCase);
             expect(dataGenerator.getValuesForColumn(res, 'number'))
                 .toEqual([0]);
         });
@@ -405,7 +405,7 @@ const testFilter = () => {
                     searchVal: new Date()
                 }
             ];
-            const res = DataUtil.filter(data, state);
+            const res = FilterUtil.filter(data, state);
             expect(dataGenerator.getValuesForColumn(res, 'number'))
                 .toEqual([1, 2, 3, 4]);
         });
@@ -419,7 +419,7 @@ const testFilter = () => {
                     fieldName: 'boolean'
                 }
             ];
-            const res = DataUtil.filter(data, state);
+            const res = FilterUtil.filter(data, state);
             expect(dataGenerator.getValuesForColumn(res, 'number'))
                 .toEqual([0, 2, 4]);
         });
@@ -434,7 +434,7 @@ const testFilter = () => {
                     fieldName: 'boolean'
                 }
             ];
-            const res = DataUtil.filter(data, state);
+            const res = FilterUtil.filter(data, state);
             expect(dataGenerator.getValuesForColumn(res, 'number'))
                 .toEqual([0, 2]);
         });
diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts
index c5421f3e705..cbad97fd4d3 100644
--- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts
+++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts
@@ -117,13 +117,6 @@ export class DataUtil {
         return data.slice(index * recordsPerPage, (index + 1) * recordsPerPage);
     }
 
-    public static filter<T>(data: T[], state: IFilteringState, grid?: GridType): T[] {
-        if (!state.strategy) {
-            state.strategy = new FilteringStrategy();
-        }
-        return state.strategy.filter(data, state.expressionsTree, state.advancedExpressionsTree, grid);
-    }
-
     public static correctPagingState(state: IPagingState, length: number) {
         const maxPage = Math.ceil(length / state.recordsPerPage) - 1;
         if (!isNaN(maxPage) && state.index > maxPage) {
diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts
index 09b932de6f1..ec976e90008 100644
--- a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts
+++ b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts
@@ -1,39 +1,46 @@
 import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from './filtering-expressions-tree';
-import { resolveNestedPath, parseDate } from '../core/utils';
-import { GridType, PivotGridType } from '../grids/common/grid.interface';
-import { PivotUtil } from '../grids/pivot-grid/pivot-util';
+import { resolveNestedPath, parseDate, formatDate, formatCurrency } from '../core/utils';
+import { ColumnType, GridType } from '../grids/common/grid.interface';
+import { GridColumnDataType } from './data-util';
+import { SortingDirection } from './sorting-strategy';
+import { formatNumber, formatPercent, getLocaleCurrencyCode } from '@angular/common';
+import { IFilteringState } from './filtering-state.interface';
 
 const DateType = 'date';
 const DateTimeType = 'dateTime';
 const TimeType = 'time';
 
+export class FilterUtil {
+    public static filter<T>(data: T[], state: IFilteringState, grid?: GridType): T[] {
+        if (!state.strategy) {
+            state.strategy = new FilteringStrategy();
+        }
+        return state.strategy.filter(data, state.expressionsTree, state.advancedExpressionsTree, grid);
+    }
+}
+
 export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree,
         grid?: GridType): any[];
+    getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree) : Promise<IgxFilterItem[]>;
 }
 
-export class NoopFilteringStrategy implements IFilteringStrategy {
-    private static _instance: NoopFilteringStrategy = null;
-
-    private constructor() {  }
-
-    public static instance() {
-        return this._instance || (this._instance = new NoopFilteringStrategy());
-    }
-
-    public filter(data: any[], _: IFilteringExpressionsTree, __?: IFilteringExpressionsTree): any[] {
-        return data;
-    }
+export interface IgxFilterItem {
+    value: any;
+    label?: string;
+    children?: IgxFilterItem[];
 }
 
 export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
+    // protected
     public findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean {
         const cond = expr.condition;
         const val = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid);
         return cond.logic(val, expr.searchVal, expr.ignoreCase);
     }
 
+    // protected
     public matchRecord(rec: any, expressions: IFilteringExpressionsTree | IFilteringExpression, grid?: GridType): boolean {
         if (expressions) {
             if (expressions instanceof FilteringExpressionsTree) {
@@ -72,21 +79,119 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
         return true;
     }
 
+    public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
+
+        let data = column.grid.gridAPI.filterDataByExpressions(tree);
+        data = column.grid.gridAPI.sortDataByExpressions(data,
+            [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }]);
+
+        const columnField = column.field;
+        let filterItems: IgxFilterItem[] = data.map(record => {
+            let value = resolveNestedPath(record, columnField);
+            const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
+
+            value = applyFormatter ?
+                column.formatter(value, record) :
+                value;
+
+            return {
+                value,
+                label: this.getFilterItemLabel(column, value, !applyFormatter, record)
+            };
+        });
+        filterItems = this.getUniqueFilterItems(column, filterItems);
+
+        return Promise.resolve(filterItems);
+    }
+
+    protected getFilterItemLabel(column: ColumnType, value: any, applyFormatter: boolean, data: any) {
+        if (column.formatter) {
+            if (applyFormatter) {
+                return column.formatter(value, data);
+            }
+            return value;
+        }
+
+        const { display, format, digitsInfo, currencyCode, timezone } = column.pipeArgs;
+        const locale = column.grid.locale;
+
+        switch (column.dataType) {
+            case GridColumnDataType.Date:
+            case GridColumnDataType.DateTime:
+            case GridColumnDataType.Time:
+                return formatDate(value, format, locale, timezone);
+            case GridColumnDataType.Currency:
+                return formatCurrency(value, currencyCode || getLocaleCurrencyCode(locale), display, digitsInfo, locale);
+            case GridColumnDataType.Number:
+                return formatNumber(value, locale, digitsInfo);
+            case GridColumnDataType.Percent:
+                return formatPercent(value, locale, digitsInfo);
+            default:
+                return value;
+        }
+    }
+
+    protected getUniqueFilterItems(column: ColumnType, filterItems: IgxFilterItem[]) {
+        const filteredUniqueValues = filterItems.reduce((map, item) => {
+            let key = item.value;
+
+            if (column.dataType === GridColumnDataType.String && column.filteringIgnoreCase) {
+                key = key?.toString().toLowerCase();
+            } else if (column.dataType === GridColumnDataType.DateTime) {
+                key = item.value?.toLocaleString();
+                item.value = key ? new Date(key) : key;
+            } else if (column.dataType === GridColumnDataType.Time) {
+                const date = key ? new Date(key) : key;
+                key = date ? new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds()) : key;
+                item.value = key ? new Date(key) : key;
+            } else if (column.dataType === GridColumnDataType.Date) {
+                const date = key ? new Date(key) : key;
+                key = date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()).toISOString() : key;
+                item.value = date;
+            }
+
+            return map.has(key) ? map : map.set(key, item)
+        }, new Map());
+        const uniqueValues = Array.from(filteredUniqueValues.values());
+
+        return uniqueValues;
+    }
+
+    protected shouldFormatFilterValues(_column: ColumnType): boolean {
+        return false;
+    }
+
     public abstract filter(data: any[], expressionsTree: IFilteringExpressionsTree,
         advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): any[];
 
     protected abstract getFieldValue(rec: any, fieldName: string, isDate?: boolean, isTime?: boolean, grid?: GridType): any;
 }
 
+export class NoopFilteringStrategy extends BaseFilteringStrategy {
+    protected getFieldValue(rec: any, _fieldName: string) {
+        return rec;
+    }
+    private static _instance: NoopFilteringStrategy = null;
+
+    public static instance() {
+        return this._instance || (this._instance = new NoopFilteringStrategy());
+    }
+
+    public filter(data: any[], _: IFilteringExpressionsTree, __?: IFilteringExpressionsTree): any[] {
+        return data;
+    }
+}
+
+
 export class FilteringStrategy extends BaseFilteringStrategy {
-    private static _instace: FilteringStrategy = null;
+    private static _instance: FilteringStrategy = null;
 
     constructor() {
         super();
     }
 
     public static instance() {
-        return this._instace || (this._instace = new this());
+        return this._instance || (this._instance = new this());
     }
 
     public filter<T>(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree,
@@ -108,9 +213,14 @@ export class FilteringStrategy extends BaseFilteringStrategy {
         return res;
     }
 
-    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false): any {
+    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: GridType): any {
+        const column = grid?.getColumnByName(fieldName);
         let value = resolveNestedPath(rec, fieldName);
-        value = value && (isDate || isTime) ? parseDate(value) : value;
+
+        value = column?.formatter && this.shouldFormatFilterValues(column) ?
+            column.formatter(value, rec) :
+            value && (isDate || isTime) ? parseDate(value) : value;
+
         return value;
     }
 }
@@ -125,18 +235,7 @@ export class FormattedValuesFilteringStrategy extends FilteringStrategy {
         super();
     }
 
-    /** @hidden */
-    public shouldApplyFormatter(fieldName: string): boolean {
-        return !this.fields || this.fields.length === 0 || this.fields.some(f => f === fieldName);
-    }
-
-    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: GridType): any {
-        const column = grid.getColumnByName(fieldName);
-        let value = resolveNestedPath(rec, fieldName);
-
-        value = column.formatter && this.shouldApplyFormatter(fieldName) ?
-            column.formatter(value, rec) : value && (isDate || isTime) ? parseDate(value) : value;
-
-        return value;
+    protected shouldFormatFilterValues(column: ColumnType): boolean {
+        return !this.fields || this.fields.length === 0 || this.fields.some(f => f === column.field);
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
index 1953235f749..e762ab9ba47 100644
--- a/projects/igniteui-angular/src/lib/grids/api.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -9,6 +9,7 @@ import { CellType, ColumnType, GridServiceType, GridType, RowType } from './comm
 import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events';
 import { IgxColumnMovingService } from './moving/moving.service';
 import { ISortingExpression, SortingDirection } from '../data-operations/sorting-strategy';
+import { FilterUtil } from '../data-operations/filtering-strategy';
 
 /**
  * @hidden
@@ -466,12 +467,16 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
 
         if (expressionsTree.filteringOperands.length) {
             const state = { expressionsTree, strategy: this.grid.filterStrategy };
-            data = DataUtil.filter(cloneArray(data), state, this.grid);
+            data = FilterUtil.filter(cloneArray(data), state, this.grid);
         }
 
         return data;
     }
 
+    public sortDataByExpressions(data: any[], expressions: ISortingExpression[]) {
+        return DataUtil.sort(cloneArray(data), expressions, this.grid.sortStrategy, this.grid);
+    }
+
     /**
      * Updates related row of provided grid's data source with provided new row value
      *
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
index fee97a9bc1c..65df4be0edc 100644
--- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -234,6 +234,7 @@ export interface GridServiceType {
     clear_sort(fieldName: string): void;
 
     filterDataByExpressions(expressionsTree: IFilteringExpressionsTree): any[];
+    sortDataByExpressions(data: any[], expressions: ISortingExpression[]): any[];
 
     update_cell(cell: IgxCell): IGridEditEventArgs;
     update_row(row: IgxEditRow, value: any, event?: Event): IGridEditEventArgs;
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts
index 9a8b3aa4c94..3cdf3c2966a 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts
@@ -17,6 +17,7 @@ export abstract class BaseFilteringComponent {
     public abstract mainDropdown: ElementRef<HTMLElement>;
     public abstract expressionsList: ExpressionUI[];
     public abstract listData: FilterListItem[];
+    public abstract isHierarchical: boolean;
 
     public abstract loadingStart: EventEmitter<undefined>;
     public abstract loadingEnd: EventEmitter<undefined>;
@@ -40,5 +41,4 @@ export abstract class BaseFilteringComponent {
     public abstract onPin(): void;
     public abstract onHideToggle(): void;
     public abstract cancel(): void;
-
 }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts
index 86e6dfc3ba4..724df63cefb 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts
@@ -12,6 +12,8 @@ export class FilterListItem {
     public isFiltered: boolean;
     public isSpecial = false;
     public isBlanks = false;
+    public children?: Array<FilterListItem>;
+    public parent?: FilterListItem;
 }
 
 /**
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
index 81832ccddcf..dfaf2c87a06 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
@@ -20,16 +20,16 @@
     </igx-icon>
 </igx-input-group>
 
-<igx-list #list [displayDensity]="esf.displayDensity" [isLoading]="isLoading">
+<igx-list #list [displayDensity]="esf.displayDensity" [isLoading]="isLoading" *ngIf="!isHierarchical()">
     <div style="overflow: hidden; position: relative;">
         <igx-list-item
         *igxFor="let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">
             <igx-checkbox
                 [value]="item"
                 [tabindex]="-1"
-                [checked]="item.isSelected"
+                [checked]="item?.isSelected"
                 [disableRipple]="true"
-                [indeterminate]="item.indeterminate"
+                [indeterminate]="item?.indeterminate"
                 [disableTransitions]="true"
                 (change)="onCheckboxChange($event)">
                 {{ item.label }}
@@ -43,8 +43,88 @@
             </ng-container>
         </div>
     </ng-template>
+
+    <ng-template igxEmptyList>
+        <ng-container *ngTemplateOutlet="emptySearch"></ng-container>
+    </ng-template>
 </igx-list>
 
+<div class="igx-excel-filter__tree" *ngIf="isHierarchical()">
+    <div class="igx-excel-filter__tree-alike" *ngIf="!isTreeEmpty()">
+        <div class="igx-excel-filter__tree-alike-item">
+            <igx-checkbox #selectAllCheckbox
+                          [value]="selectAllItem"
+                          [checked]="selectAllItem?.isSelected"
+                          [disableRipple]="true"
+                          [indeterminate]="selectAllItem?.indeterminate"
+                          [disableTransitions]="true"
+                          (change)="onSelectAllCheckboxChange($event)">
+                {{ selectAllItem.label }}
+            </igx-checkbox>
+        </div>
+        <div class="igx-excel-filter__tree-alike-item" *ngIf="searchValue">
+            <igx-checkbox #addToCurrentFilterCheckbox
+                          [value]="addToCurrentFilterItem"
+                          [checked]="addToCurrentFilterItem.isSelected"
+                          [disableRipple]="true"
+                          [disableTransitions]="true">
+
+                {{ addToCurrentFilterItem.label }}
+            </igx-checkbox>
+        </div>
+    </div>
+
+    <igx-tree #tree [displayDensity]="esf.displayDensity" selection="Cascading"  (nodeSelection)="onNodeSelectionChange($event)">
+        <igx-tree-node [data]="item" *ngFor="let item of displayedListData;" [selected]="item.isSelected">
+            <div>{{item.label}}</div>
+            <igx-tree-node [data]="childLevel1" *ngFor="let childLevel1 of item.children" [selected]="childLevel1.isSelected">
+                <div>{{childLevel1.label}}</div>
+                <igx-tree-node [data]="childLevel2" *ngFor="let childLevel2 of childLevel1.children" [selected]="childLevel2.isSelected">
+                    <div>{{childLevel2.label}}</div>
+                    <igx-tree-node [data]="childLevel3" *ngFor="let childLevel3 of childLevel2.children" [selected]="childLevel3.isSelected">
+                        <div>{{childLevel3.label}}</div>
+                        <igx-tree-node [data]="childLevel4" *ngFor="let childLevel4 of childLevel3.children" [selected]="childLevel4.isSelected">
+                            <div>{{childLevel4.label}}</div>
+                            <igx-tree-node [data]="childLevel5" *ngFor="let childLevel5 of childLevel4.children" [selected]="childLevel5.isSelected">
+                                <div>{{childLevel5.label}}</div>
+                                <igx-tree-node [data]="childLevel6" *ngFor="let childLevel6 of childLevel5.children" [selected]="childLevel6.isSelected">
+                                    <div>{{childLevel6.label}}</div>
+                                    <igx-tree-node [data]="childLevel7" *ngFor="let childLevel7 of childLevel6.children" [selected]="childLevel7.isSelected">
+                                        <div>{{childLevel7.label}}</div>
+                                        <igx-tree-node [data]="childLevel8" *ngFor="let childLevel8 of childLevel7.children" [selected]="childLevel8.isSelected">
+                                            <div>{{childLevel8.label}}</div>
+                                            <igx-tree-node [data]="childLevel9" *ngFor="let childLevel9 of childLevel8.children" [selected]="childLevel9.isSelected">
+                                                <div>{{childLevel9.label}}</div>
+                                            </igx-tree-node>
+                                        </igx-tree-node>
+                                    </igx-tree-node>
+                                </igx-tree-node>
+                            </igx-tree-node>
+                        </igx-tree-node>
+                    </igx-tree-node>
+                </igx-tree-node>
+            </igx-tree-node>
+        </igx-tree-node>
+    </igx-tree>
+
+    <ng-template igxDataLoading>
+        <div class="igx-excel-filter__loading">
+            <ng-container *ngTemplateOutlet="valuesLoadingTemplate">
+            </ng-container>
+        </div>
+    </ng-template>
+
+    <ng-template [ngIf]="isTreeEmpty()">
+        <ng-container *ngTemplateOutlet="emptySearch"></ng-container>
+    </ng-template>
+</div>
+
+<ng-template #emptySearch>
+    <div class="igx-excel-filter__empty">
+        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}
+    </div>
+</ng-template>
+
 <ng-template #defaultExcelStyleLoadingValuesTemplate>
     <igx-circular-bar [indeterminate]="true">
     </igx-circular-bar>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
index fa5fd23585e..c0a4ddf2834 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -20,11 +20,12 @@ import {
 } from '../../../data-operations/filtering-condition';
 import { Subject } from 'rxjs';
 import { IgxListComponent } from '../../../list/public_api';
-import { IChangeCheckboxEventArgs } from '../../../checkbox/checkbox.component';
+import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from '../../../checkbox/checkbox.component';
 import { takeUntil } from 'rxjs/operators';
-import { PlatformUtil } from '../../../core/utils';
+import { cloneHierarchicalArray, PlatformUtil } from '../../../core/utils';
 import { BaseFilteringComponent } from './base-filtering.component';
 import { ExpressionUI, FilterListItem } from './common';
+import { IgxTreeComponent, ITreeNodeSelectionEvent } from '../../../tree/public_api';
 
 @Directive({
     selector: '[igxExcelStyleLoading]'
@@ -58,9 +59,27 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-    @ViewChild('list', { read: IgxListComponent, static: true })
+    @ViewChild('list', { read: IgxListComponent, static: false })
     public list: IgxListComponent;
 
+    /**
+     * @hidden @internal
+     */
+    @ViewChild('selectAllCheckbox', { read: IgxCheckboxComponent, static: false })
+    public selectAllCheckbox: IgxCheckboxComponent;
+
+    /**
+     * @hidden @internal
+     */
+     @ViewChild('addToCurrentFilterCheckbox', { read: IgxCheckboxComponent, static: false })
+     public addToCurrentFilterCheckbox: IgxCheckboxComponent;
+
+    /**
+     * @hidden @internal
+     */
+     @ViewChild('tree', { read: IgxTreeComponent, static: false })
+     public tree: IgxTreeComponent;
+
     /**
      * @hidden @internal
      */
@@ -76,8 +95,29 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-    public get addToCurrentFilter(): FilterListItem {
-        if (!this._addToCurrentFilter) {
+    public get selectAllItem(): FilterListItem {
+        if (!this._selectAllItem) {
+            const selectAllItem = {
+                isSelected: false,
+                isFiltered: false,
+                indeterminate: false,
+                isSpecial: true,
+                isBlanks: false,
+                value: this.esf.grid.resourceStrings.igx_grid_excel_select_all,
+                label: this.esf.grid.resourceStrings.igx_grid_excel_select_all
+            };
+
+            this._selectAllItem = selectAllItem;
+        }
+
+        return this._selectAllItem;
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public get addToCurrentFilterItem(): FilterListItem {
+        if (!this._addToCurrentFilterItem) {
             const addToCurrentFilterItem = {
                 isSelected: false,
                 isFiltered: false,
@@ -88,10 +128,10 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                 label: this.esf.grid.resourceStrings.igx_grid_excel_add_to_filter
             };
 
-            this._addToCurrentFilter = addToCurrentFilterItem;
+            this._addToCurrentFilterItem = addToCurrentFilterItem;
         }
 
-        return this._addToCurrentFilter;
+        return this._addToCurrentFilterItem;
     }
 
     /**
@@ -133,7 +173,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     }
 
     private _isLoading;
-    private _addToCurrentFilter: FilterListItem;
+    private _addToCurrentFilterItem: FilterListItem;
+    private _selectAllItem: FilterListItem;
+    private _hierarchicalSelectedItems: FilterListItem[];
     private destroy$ = new Subject<boolean>();
 
     constructor(public cdr: ChangeDetectorRef, public esf: BaseFilteringComponent, protected platform: PlatformUtil) {
@@ -152,10 +194,15 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             });
         });
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.virtDir.resetScrollPosition();
+            this.virtDir?.resetScrollPosition();
         });
 
         esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this._selectAllItem = this.esf.listData[0];
+            if (this.isHierarchical() && this.esf.listData[0].isSpecial) {
+                this.esf.listData.splice(0, 1);
+            }
+
             if (this.searchValue) {
                 this.clearInput();
             } else {
@@ -163,6 +210,10 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             }
 
             this.cdr.detectChanges();
+            requestAnimationFrame(() => {
+                this.refreshSize();
+                this.searchInput.nativeElement.focus();
+            });
         });
     }
 
@@ -179,10 +230,12 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public refreshSize = () => {
-        this.virtDir.igxForContainerSize = this.containerSize;
-        this.virtDir.igxForItemSize = this.itemSize;
-        this.virtDir.recalcUpdateSizes();
-        this.cdr.detectChanges();
+        if (this.virtDir) {
+            this.virtDir.igxForContainerSize = this.containerSize;
+            this.virtDir.igxForItemSize = this.itemSize;
+            this.virtDir.recalcUpdateSizes();
+            this.cdr.detectChanges();
+        }
     }
 
     /**
@@ -202,7 +255,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
 
         if (selectedIndex === 0) {
             this.displayedListData.forEach(element => {
-                if (element === this.addToCurrentFilter) {
+                if (element === this.addToCurrentFilterItem) {
                     return;
                 }
                 element.isSelected = eventArgs.checked;
@@ -211,7 +264,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             selectAllBtn.indeterminate = false;
         } else {
             eventArgs.checkbox.value.isSelected = eventArgs.checked;
-            const indexToStartSlicing = this.displayedListData.indexOf(this.addToCurrentFilter) > -1 ? 2 : 1;
+            const indexToStartSlicing = this.displayedListData.indexOf(this.addToCurrentFilterItem) > -1 ? 2 : 1;
 
             const slicedArray =
                 this.displayedListData.slice(indexToStartSlicing, this.displayedListData.length);
@@ -229,6 +282,41 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         eventArgs.checkbox.nativeCheckbox.nativeElement.blur();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public onSelectAllCheckboxChange(eventArgs: IChangeCheckboxEventArgs) {
+        this._selectAllItem.isSelected = eventArgs.checked;
+        this._selectAllItem.indeterminate = false;
+        const treeNodes = this.tree.nodes;
+        treeNodes.forEach(node => (node.data as FilterListItem).isSelected = eventArgs.checked);
+    }
+
+    /**
+     * @hidden @internal
+     */
+     public onNodeSelectionChange(eventArgs: ITreeNodeSelectionEvent) {
+        eventArgs.added.forEach(node => {
+            (node.data as FilterListItem).isSelected = true;
+        });
+        eventArgs.removed.forEach(node => {
+            (node.data as FilterListItem).isSelected = false;
+        });
+
+        this._hierarchicalSelectedItems = eventArgs.newSelection.map(item => item.data as FilterListItem);
+        const selectAllBtn = this.selectAllItem;
+        if (this._hierarchicalSelectedItems.length === 0) {
+            selectAllBtn.indeterminate = false;
+            selectAllBtn.isSelected = false;
+        } else if (this._hierarchicalSelectedItems.length === this.tree.nodes.length) {
+            selectAllBtn.indeterminate = false;
+            selectAllBtn.isSelected = true;
+        } else {
+            selectAllBtn.indeterminate = true;
+            selectAllBtn.isSelected = false;
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -247,7 +335,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      */
     public get containerSize() {
         if (this.esf.listData.length) {
-            return this.list.element.nativeElement.offsetHeight;
+            return this.list?.element.nativeElement.offsetHeight;
         }
 
         // GE Nov 1st, 2021 #10355 Return a numeric value, so the chunk size is calculated properly.
@@ -260,8 +348,8 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public get applyButtonDisabled(): boolean {
-        return this.esf.listData[0] && !this.esf.listData[0].isSelected && !this.esf.listData[0].indeterminate ||
-            this.displayedListData && this.displayedListData.length === 0;
+        return (this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
+                (this.displayedListData && this.displayedListData.length === 0);
     }
 
     /**
@@ -300,38 +388,69 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             return;
         }
 
-        const searchAllBtn = this.esf.listData[0];
+        let selectAllBtn;
+        if (this._selectAllItem) {
+            selectAllBtn = this._selectAllItem;
+        } else {
+            selectAllBtn = this.esf.listData[0];
+        }
 
         if (!this.searchValue) {
             const anyFiltered = this.esf.listData.some(i => i.isFiltered);
             const anyUnfiltered = this.esf.listData.some(i => !i.isFiltered);
-
-            searchAllBtn.indeterminate = anyFiltered && anyUnfiltered;
+            selectAllBtn.indeterminate = anyFiltered && anyUnfiltered;
+            if (this.isHierarchical() && this.tree) {
+                this._hierarchicalSelectedItems = this.tree.nodes.map(n => n.data as FilterListItem).filter(item => item.isFiltered);
+            }
 
             this.esf.listData.forEach(i => i.isSelected = i.isFiltered);
-            this.displayedListData = this.esf.listData;
-            searchAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;
+            if (this.displayedListData !== this.esf.listData) {
+                this.displayedListData = this.esf.listData;
+                if (this.isHierarchical()) {
+                    this.cdr.detectChanges();
+                    this.tree.nodes.forEach(n => {
+                        const item = n.data as FilterListItem;
+                        n.selected = item.isSelected || item.isFiltered;
+                    });
+                }
+            }
+            selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;
+            this.cdr.detectChanges();
 
             return;
         }
 
         const searchVal = this.searchValue.toLowerCase();
-        this.displayedListData = this.esf.listData.filter((it, i) => (i === 0 && it.isSpecial) ||
-            (it.label !== null && it.label !== undefined) &&
-            !it.isBlanks &&
-            it.label.toString().toLowerCase().indexOf(searchVal) > -1);
-
-        this.esf.listData.forEach(i => i.isSelected = false);
-        this.displayedListData.forEach(i => i.isSelected = true);
-
-        this.displayedListData.splice(1, 0, this.addToCurrentFilter);
-
-        searchAllBtn.indeterminate = false;
-        searchAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all_search_results;
-
-        if (this.displayedListData.length === 2) {
-            this.displayedListData = [];
+        if (this.isHierarchical()) {
+            this._hierarchicalSelectedItems = [];
+            this.esf.listData.forEach(i => i.isSelected = false);
+            const matchedData = cloneHierarchicalArray(this.esf.listData, 'children');
+            this.displayedListData = this.hierarchicalSelectMatches(matchedData, searchVal);
+            this.cdr.detectChanges();
+            this.tree.nodes.forEach(n => {
+                n.selected = true;
+                if ((n.data as FilterListItem).label.toString().toLowerCase().indexOf(searchVal) > -1) {
+                    this.expandAllParentNodes(n);
+                }
+            });
+        } else {
+            this.displayedListData = this.esf.listData.filter((it, i) => (i === 0 && it.isSpecial) ||
+                (it.label !== null && it.label !== undefined) &&
+                !it.isBlanks &&
+                it.label.toString().toLowerCase().indexOf(searchVal) > -1);
+
+            this.esf.listData.forEach(i => i.isSelected = false);
+            this.displayedListData.forEach(i => i.isSelected = true);
+            this.displayedListData.splice(1, 0, this.addToCurrentFilterItem);
+            if (this.displayedListData.length === 2) {
+                this.displayedListData = [];
+            }
         }
+
+        selectAllBtn.indeterminate = false;
+        selectAllBtn.isSelected = true;
+        selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all_search_results;
+        this.cdr.detectChanges();
     }
 
     /**
@@ -340,14 +459,27 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     public applyFilter() {
         const filterTree = new FilteringExpressionsTree(FilteringLogic.Or, this.esf.column.field);
 
-        const item = this.displayedListData[1];
-        const addToCurrentFilterOptionVisible = item === this.addToCurrentFilter;
+        let selectedItems = [];
+        if (this.isHierarchical()) {
+            if (this.addToCurrentFilterCheckbox && this.addToCurrentFilterCheckbox.checked) {
+                this.addFilteredToSelectedItems(this.esf.listData);
+            }
 
-        const selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?
-            this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :
-            this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);
+            selectedItems = this._hierarchicalSelectedItems;
+        } else {
+            const item = this.displayedListData[1];
+            const addToCurrentFilterOptionVisible = item === this.addToCurrentFilterItem;
+            selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?
+                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :
+                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);
+        }
 
-        const unselectedItem = this.esf.listData.slice(1, this.esf.listData.length).find(el => el.isSelected === false);
+        let unselectedItem;
+        if (this.isHierarchical()) {
+            unselectedItem = this.esf.listData.find(el => el.isSelected === false);
+        } else {
+            unselectedItem = this.esf.listData.slice(1, this.esf.listData.length).find(el => el.isSelected === false);
+        }
 
         if (unselectedItem) {
             if (selectedItems.length <= IgxExcelStyleSearchComponent.filterOptimizationThreshold) {
@@ -410,6 +542,77 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         this.esf.closeDropdown();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public isHierarchical() {
+        return this.esf.isHierarchical;
+    }
+
+    /**
+     * @hidden @internal
+     */
+     public isTreeEmpty() {
+        return this.esf.isHierarchical && this.displayedListData.length === 0;
+    }
+
+    private hierarchicalSelectMatches(data: FilterListItem[], searchVal: string) {
+        data.forEach(element => {
+            element.indeterminate = false;
+            element.isSelected = false;
+            const node = this.tree.nodes.filter(n => (n.data as FilterListItem).label === element.label)[0];
+            if (node) {
+                node.expanded = false;
+            }
+
+            if (element.label.toString().toLowerCase().indexOf(searchVal) > -1) {
+                element.isSelected = true;
+                this.hierarchicalSelectAllChildren(element);
+                this._hierarchicalSelectedItems.push(element);
+            } else if (element.children.length > 0) {
+                element.children = this.hierarchicalSelectMatches(element.children, searchVal);
+                if (element.children.length > 0) {
+                    element.isSelected = true;
+                    if (node) {
+                        node.expanded = true;
+                    }
+                }
+            }
+        });
+
+        return data.filter(element => element.isSelected === true);
+    }
+
+    private hierarchicalSelectAllChildren(element: FilterListItem) {
+        element.children.forEach(child => {
+            child.indeterminate = false;
+            child.isSelected = true;
+            this._hierarchicalSelectedItems.push(child);
+            if (child.children) {
+                this.hierarchicalSelectAllChildren(child);
+            }
+        })
+    }
+
+    private expandAllParentNodes(node: any) {
+        if (node.parentNode) {
+            node.parentNode.expanded = true;
+            this.expandAllParentNodes(node.parentNode);
+        }
+    }
+
+    private addFilteredToSelectedItems(records: FilterListItem[]) {
+        records.forEach(record => {
+            if (record.children) {
+                this.addFilteredToSelectedItems(record.children);
+            }
+
+            if (record.isFiltered && this._hierarchicalSelectedItems.indexOf(record) < 0) {
+                this._hierarchicalSelectedItems.push(record);
+            }
+        })
+    }
+
     private createCondition(conditionName: string) {
         switch (this.esf.column.dataType) {
             case GridColumnDataType.Boolean:
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
index 95685cbc2c8..64eec9b34e6 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
@@ -19,13 +19,12 @@ import {
     ViewRef
 } from '@angular/core';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
-import { resolveNestedPath, parseDate, uniqueDates, PlatformUtil, formatDate, formatCurrency } from '../../../core/utils';
+import { PlatformUtil, formatDate, formatCurrency } from '../../../core/utils';
 import { GridColumnDataType } from '../../../data-operations/data-util';
 import { Subscription } from 'rxjs';
 import { DisplayDensity } from '../../../core/density';
 import { GridSelectionMode } from '../../common/enums';
-import { FormattedValuesFilteringStrategy } from '../../../data-operations/filtering-strategy';
-import { TreeGridFormattedValuesFilteringStrategy } from '../../tree-grid/tree-grid.filtering.strategy';
+import { IgxFilterItem } from '../../../data-operations/filtering-strategy';
 import { formatNumber, formatPercent, getLocaleCurrencyCode } from '@angular/common';
 import { BaseFilteringComponent } from './base-filtering.component';
 import { ExpressionUI, FilterListItem, generateExpressionsList } from './common';
@@ -33,7 +32,6 @@ import { ColumnType, GridType, IGX_GRID_BASE } from '../../common/grid.interface
 import { IgxOverlayService } from '../../../services/overlay/overlay';
 import { SortingDirection } from '../../../data-operations/sorting-strategy';
 
-
 @Directive({
     selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]'
 })
@@ -188,7 +186,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     /**
      * @hidden @internal
      */
-    public uniqueValues = [];
+    public uniqueValues: IgxFilterItem[] = [];
     /**
      * @hidden @internal
      */
@@ -197,6 +195,10 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
      * @hidden @internal
      */
     public overlayComponentId: string;
+    /**
+     * @hidden @internal
+     */
+    public isHierarchical = false;
 
     private _minHeight;
 
@@ -420,32 +422,10 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         return selectableExpressionsCount === this.expressionsList.length;
     }
 
-    private areExpressionsValuesInTheList() {
-        if (this.column.dataType === GridColumnDataType.Boolean) {
-            return true;
-        }
-
-        if (this.filterValues.size === 1) {
-            const firstValue = this.filterValues.values().next().value;
-
-            if (!firstValue && firstValue !== 0) {
-                return true;
-            }
-        }
-
-        for (const expression of this.uniqueValues) {
-            const value = this.getExpressionValue(expression);
-            if (this.filterValues.has(value)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
     private populateColumnData() {
+        this.cdr.detectChanges();
+
         if (this.grid.uniqueColumnValuesStrategy) {
-            this.cdr.detectChanges();
             this.renderColumnValuesRemotely();
         } else {
             this.renderColumnValuesFromData();
@@ -457,83 +437,58 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         const expressionsTree: FilteringExpressionsTree = this.getColumnFilterExpressionsTree();
 
         const prevColumn = this.column;
-        this.grid.uniqueColumnValuesStrategy(this.column, expressionsTree, (colVals: any[]) => {
+        this.grid.uniqueColumnValuesStrategy(this.column, expressionsTree, (values: any[]) => {
             if (!this.column || this.column !== prevColumn) {
                 return;
             }
 
-            const columnValues = (this.column.dataType === GridColumnDataType.Date) ?
-                colVals.map(value => {
-                    const label = this.getFilterItemLabel(value);
-                    return { label, value };
-                }) : colVals;
+            const items = values.map(v => ({
+                value: v
+            }));
 
-            this.renderValues(columnValues);
+            this.uniqueValues = this.column.sortStrategy.sort(items, 'value', SortingDirection.Asc, this.column.sortingIgnoreCase,
+            (obj, key) => {
+                let resolvedValue = obj[key];
+                if (this.column.dataType === GridColumnDataType.Time) {
+                    resolvedValue = new Date().setHours(
+                        resolvedValue.getHours(),
+                        resolvedValue.getMinutes(),
+                        resolvedValue.getSeconds(),
+                        resolvedValue.getMilliseconds());
+                }
+
+                return resolvedValue;
+            });
+
+            this.renderValues();
             this.loadingEnd.emit();
         });
     }
 
-    private shouldFormatValues() {
-        return this.column.formatter &&
-            (this.grid.filterStrategy instanceof FormattedValuesFilteringStrategy ||
-                this.grid.filterStrategy instanceof TreeGridFormattedValuesFilteringStrategy) &&
-            this.grid.filterStrategy.shouldApplyFormatter(this.column.field);
-    }
-
     private renderColumnValuesFromData() {
-        const expressionsTree = this.getColumnFilterExpressionsTree();
-        // TODO: Check why we access the API service through the column ??
-        // const data = this.column.gridAPI.filterDataByExpressions(expressionsTree);
-        const data = this.grid.gridAPI.filterDataByExpressions(expressionsTree);
-
-        const shouldFormatValues = this.shouldFormatValues();
-        const columnField = this.column.field;
-        const columnValues = (this.column.dataType === GridColumnDataType.Date) ?
-            data.map(record => {
-                const value = (resolveNestedPath(record, columnField));
-                const label = this.getFilterItemLabel(value, true, record);
-                return { label, value };
-            }) : data.map(record => {
-                const value = resolveNestedPath(record, columnField);
-                return shouldFormatValues ? this.column.formatter(value, record) : value;
-            });
+        this.loadingStart.emit();
 
-        this.renderValues(columnValues);
+        const expressionsTree = this.getColumnFilterExpressionsTree();
+        const promise = this.grid.filterStrategy.getFilterItems(this.column, expressionsTree);
+        promise.then((items) => {
+            this.isHierarchical = items.length > 0 && items.some(i => i.children && i.children.length > 0);
+            this.uniqueValues = items;
+            this.renderValues();
+            this.loadingEnd.emit();
+            this.sortingChanged.emit();
+        });
     }
 
-    private renderValues(columnValues: any[]) {
-        this.generateUniqueValues(columnValues);
-        this.generateFilterValues(this.column.dataType === GridColumnDataType.Date || this.column.dataType === GridColumnDataType.DateTime);
+    private renderValues() {
+        this.filterValues = this.generateFilterValues(this.column.dataType === GridColumnDataType.Date || this.column.dataType === GridColumnDataType.DateTime);
         this.generateListData();
     }
 
-    private generateUniqueValues(columnValues: any[]) {
-        if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase) {
-            const filteredUniqueValues = columnValues.map(s => s?.toString().toLowerCase())
-                .reduce((map, val, i) => map.get(val) ? map : map.set(val, columnValues[i]), new Map());
-            this.uniqueValues = Array.from(filteredUniqueValues.values());
-        } else if (this.column.dataType === GridColumnDataType.DateTime) {
-            this.uniqueValues = Array.from(new Set(columnValues.map(v => v?.toLocaleString())));
-            this.uniqueValues.forEach((d, i) => this.uniqueValues[i] = d ? new Date(d) : d);
-        } else if (this.column.dataType === GridColumnDataType.Time) {
-            this.uniqueValues = Array.from(new Set(columnValues.map(v => {
-                if (v) {
-                    v = new Date(v);
-                    return new Date().setHours(v.getHours(), v.getMinutes(), v.getSeconds());
-                } else {
-                    return v;
-                }
-            })));
-            this.uniqueValues.forEach((d, i) => this.uniqueValues[i] = d ? new Date(d) : d);
-        } else {
-            this.uniqueValues = this.column.dataType === GridColumnDataType.Date ?
-                uniqueDates(columnValues) : Array.from(new Set(columnValues));
-        }
-    }
-
     private generateFilterValues(isDateColumn: boolean = false) {
+        let filterValues;
+
         if (isDateColumn) {
-            this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
+            filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
                 if (e.expression.condition.name === 'in') {
                     return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v =>
                         new Date(v).toISOString())];
@@ -541,7 +496,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
                 return [...arr, ...[e.expression.searchVal ? e.expression.searchVal.toISOString() : e.expression.searchVal]];
             }, []));
         } else if (this.column.dataType === GridColumnDataType.Time) {
-            this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
+            filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
                 if (e.expression.condition.name === 'in') {
                     return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v =>
                         typeof v === 'string' ? v : new Date(v).toLocaleTimeString())];
@@ -549,18 +504,20 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
                 return [...arr, ...[e.expression.searchVal ? e.expression.searchVal.toLocaleTimeString() : e.expression.searchVal]];
             }, []));
         } else {
-            this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
+            filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
                 if (e.expression.condition.name === 'in') {
                     return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values())];
                 }
                 return [...arr, ...[e.expression.searchVal]];
             }, []));
         }
+
+        return filterValues;
     }
 
     private generateListData() {
         this.listData = new Array<FilterListItem>();
-        const shouldUpdateSelection = this.areExpressionsSelectable() && this.areExpressionsValuesInTheList();
+        const shouldUpdateSelection = this.areExpressionsSelectable();
 
         if (this.column.dataType === GridColumnDataType.Boolean) {
             this.addBooleanItems();
@@ -568,22 +525,9 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
             this.addItems(shouldUpdateSelection);
         }
 
-        this.listData = this.column.sortStrategy.sort(this.listData, 'value', SortingDirection.Asc, this.column.sortingIgnoreCase,
-            (obj, key) => {
-                let resolvedValue = obj[key];
-                if (this.column.dataType === GridColumnDataType.Time) {
-                    resolvedValue = new Date().setHours(
-                        resolvedValue.getHours(),
-                        resolvedValue.getMinutes(),
-                        resolvedValue.getSeconds(),
-                        resolvedValue.getMilliseconds());
-                }
-
-                return resolvedValue;
-            });
-
-        if (this.containsNullOrEmpty) {
-            this.addBlanksItem(shouldUpdateSelection);
+        if (!this.isHierarchical && this.containsNullOrEmpty) {
+            const blanksItem = this.generateBlanksItem(shouldUpdateSelection);
+            this.listData.unshift(blanksItem);
         }
 
         if (this.listData.length > 0) {
@@ -618,14 +562,15 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         this.selectAllSelected = true;
         this.selectAllIndeterminate = false;
         this.uniqueValues.forEach(element => {
+            const value = element.value;
             const filterListItem = new FilterListItem();
-            if (element !== undefined && element !== null && element !== '') {
+            if (value !== undefined && value !== null && value !== '') {
                 if (this.column.filteringExpressionsTree) {
-                    if (element === true && this.expressionsList.find(exp => exp.expression.condition.name === 'true')) {
+                    if (value === true && this.expressionsList.find(exp => exp.expression.condition.name === 'true')) {
                         filterListItem.isSelected = true;
                         filterListItem.isFiltered = true;
                         this.selectAllIndeterminate = true;
-                    } else if (element === false && this.expressionsList.find(exp => exp.expression.condition.name === 'false')) {
+                    } else if (value === false && this.expressionsList.find(exp => exp.expression.condition.name === 'false')) {
                         filterListItem.isSelected = true;
                         filterListItem.isFiltered = true;
                         this.selectAllIndeterminate = true;
@@ -637,8 +582,8 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
                     filterListItem.isSelected = true;
                     filterListItem.isFiltered = true;
                 }
-                filterListItem.value = element;
-                filterListItem.label = element ?
+                filterListItem.value = value;
+                filterListItem.label = value ?
                     this.grid.resourceStrings.igx_grid_filter_true :
                     this.grid.resourceStrings.igx_grid_filter_false;
                 filterListItem.indeterminate = false;
@@ -651,17 +596,26 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     private addItems(shouldUpdateSelection: boolean) {
         this.selectAllSelected = true;
-        this.containsNullOrEmpty = false;
         this.selectAllIndeterminate = false;
-        const applyFormatter = !this.shouldFormatValues();
+        this.containsNullOrEmpty = false;
+        this.listData = this.generateFilterListItems(this.uniqueValues, shouldUpdateSelection);
+        this.containsNullOrEmpty = this.uniqueValues.length > this.listData.length;
+    }
 
-        this.uniqueValues.forEach(element => {
-            const hasValue = (element !== undefined && element !== null && element !== ''
-                && this.column.dataType !== GridColumnDataType.Date)
-                || !!(element && element.label);
+    private generateFilterListItems(values: IgxFilterItem[], shouldUpdateSelection: boolean, parent?: FilterListItem) {
+        let filterListItems = [];
+        values?.forEach(element => {
+            const value = element.value;
+            const hasValue = value !== undefined && value !== null && value !== '';
 
             if (hasValue) {
                 const filterListItem = new FilterListItem();
+                filterListItem.parent = parent;
+                filterListItem.value = value;
+                filterListItem.label = element.label !== undefined ?
+                    element.label :
+                    this.getFilterItemLabel(value);
+                filterListItem.indeterminate = false;
                 filterListItem.isSelected = true;
                 filterListItem.isFiltered = true;
 
@@ -670,8 +624,8 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
                     filterListItem.isFiltered = false;
 
                     if (shouldUpdateSelection) {
-                        const value = this.getExpressionValue(element);
-                        if (this.filterValues.has(value)) {
+                        const exprValue = this.getExpressionValue(value);
+                        if (this.filterValues.has(exprValue)) {
                             filterListItem.isSelected = true;
                             filterListItem.isFiltered = true;
                         }
@@ -680,13 +634,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
                         this.selectAllSelected = false;
                     }
                 }
-                filterListItem.value = this.getFilterItemValue(element);
-                filterListItem.label = this.getFilterItemLabel(element, applyFormatter);
-                filterListItem.indeterminate = false;
-                this.listData.push(filterListItem);
+
+                filterListItem.children = this.generateFilterListItems(element.children ?? element.value?.children, shouldUpdateSelection, filterListItem);
+                filterListItems.push(filterListItem);
             }
         });
-        this.containsNullOrEmpty = this.uniqueValues.length > this.listData.length;
+
+        return filterListItems;
     }
 
     private addSelectAllItem() {
@@ -700,7 +654,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         this.listData.unshift(selectAll);
     }
 
-    private addBlanksItem(shouldUpdateSelection) {
+    private generateBlanksItem(shouldUpdateSelection) {
         const blanks = new FilterListItem();
         if (this.column.filteringExpressionsTree) {
             if (shouldUpdateSelection) {
@@ -721,19 +675,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         blanks.indeterminate = false;
         blanks.isSpecial = true;
         blanks.isBlanks = true;
-        this.listData.unshift(blanks);
-    }
 
-    private getFilterItemLabel(element: any, applyFormatter: boolean = true, data?: any) {
-        if (element?.label) {
-            return element.label;
-        }
+        return blanks;
+    }
 
+    private getFilterItemLabel(value: any, applyFormatter: boolean = true, data?: any) {
         if (this.column.formatter) {
             if (applyFormatter) {
-                return this.column.formatter(element, data);
+                return this.column.formatter(value, data);
             }
-            return element;
+            return value;
         }
 
         const { display, format, digitsInfo, currencyCode, timezone } = this.column.pipeArgs;
@@ -743,36 +694,27 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
             case GridColumnDataType.Date:
             case GridColumnDataType.DateTime:
             case GridColumnDataType.Time:
-                return formatDate(element, format, locale, timezone);
+                return formatDate(value, format, locale, timezone);
             case GridColumnDataType.Currency:
-                return formatCurrency(element, currencyCode || getLocaleCurrencyCode(locale), display, digitsInfo, locale);
+                return formatCurrency(value, currencyCode || getLocaleCurrencyCode(locale), display, digitsInfo, locale);
             case GridColumnDataType.Number:
-                return formatNumber(element, locale, digitsInfo);
+                return formatNumber(value, locale, digitsInfo);
             case GridColumnDataType.Percent:
-                return formatPercent(element, locale, digitsInfo);
+                return formatPercent(value, locale, digitsInfo);
             default:
-                return element;
-        }
-    }
-
-    private getFilterItemValue(element: any) {
-        if (this.column.dataType === GridColumnDataType.Date) {
-            element = parseDate(element.value);
+                return value;
         }
-        return element;
     }
 
-    private getExpressionValue(element: any): string {
-        let value;
+    private getExpressionValue(value: any): string {
         if (this.column.dataType === GridColumnDataType.Date) {
-            value = element && element.value ? new Date(element.value).toISOString() : element.value;
+            value = value ? new Date(value).toISOString() : value;
         } else if (this.column.dataType === GridColumnDataType.DateTime) {
-            value = element ? new Date(element).toISOString() : element;
+            value = value ? new Date(value).toISOString() : value;
         } else if (this.column.dataType === GridColumnDataType.Time) {
-            value = element ? new Date(element).toLocaleTimeString() : element;
-        } else {
-            value = element;
+            value = value ? new Date(value).toLocaleTimeString() : value;
         }
+
         return value;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
index 775ad9eb2e6..b064c7339d3 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
@@ -38,72 +38,72 @@ import { IgxDatePickerModule } from '../../../date-picker/date-picker.module';
 import { IgxTimePickerModule } from '../../../time-picker/time-picker.component';
 import { IgxFocusModule } from '../../../directives/focus/focus.directive';
 import { IgxDateTimeEditorModule } from '../../../directives/date-time-editor/date-time-editor.directive';
+import { IgxTreeModule } from '../../../tree/public_api';
 
 /**
  * @hidden
  */
-@NgModule({
-    declarations: [
-        IgxGridExcelStyleFilteringComponent,
-        IgxExcelStyleHeaderComponent,
-        IgxExcelStyleSortingComponent,
-        IgxExcelStylePinningComponent,
-        IgxExcelStyleHidingComponent,
-        IgxExcelStyleSelectingComponent,
-        IgxExcelStyleClearFiltersComponent,
-        IgxExcelStyleConditionalFilterComponent,
-        IgxExcelStyleMovingComponent,
-        IgxExcelStyleSearchComponent,
-        IgxExcelStyleCustomDialogComponent,
-        IgxExcelStyleDefaultExpressionComponent,
-        IgxExcelStyleDateExpressionComponent,
-        IgxExcelStyleColumnOperationsTemplateDirective,
-        IgxExcelStyleFilterOperationsTemplateDirective,
-        IgxExcelStyleLoadingValuesTemplateDirective
-    ],
-    exports: [
-        IgxGridExcelStyleFilteringComponent,
-        IgxExcelStyleColumnOperationsTemplateDirective,
-        IgxExcelStyleFilterOperationsTemplateDirective,
-        IgxExcelStyleLoadingValuesTemplateDirective,
-        IgxExcelStyleDateExpressionComponent,
-        IgxExcelStyleHeaderComponent,
-        IgxExcelStyleSortingComponent,
-        IgxExcelStylePinningComponent,
-        IgxExcelStyleHidingComponent,
-        IgxExcelStyleSelectingComponent,
-        IgxExcelStyleClearFiltersComponent,
-        IgxExcelStyleConditionalFilterComponent,
-        IgxExcelStyleMovingComponent,
-        IgxExcelStyleSearchComponent,
-        IgxExcelStyleHeaderComponent
-    ],
-    imports: [
-        CommonModule,
-        FormsModule,
-        IgxGridPipesModule,
-        IgxButtonModule,
-        IgxButtonGroupModule,
-        IgxDatePickerModule,
-        IgxTimePickerModule,
-        IgxIconModule,
-        IgxRippleModule,
-        IgxInputGroupModule,
-        IgxDropDownModule,
-        IgxForOfModule,
-        IgxCheckboxModule,
-        IgxFilterModule,
-        IgxToggleModule,
-        IgxListModule,
-        IgxProgressBarModule,
-        IgxSelectModule,
-        IgxFocusModule,
-        IgxDateTimeEditorModule
-    ],
-    providers: [
-        IgxSelectionAPIService
-    ]
+@NgModule({
+    declarations: [
+        IgxGridExcelStyleFilteringComponent,
+        IgxExcelStyleHeaderComponent,
+        IgxExcelStyleSortingComponent,
+        IgxExcelStylePinningComponent,
+        IgxExcelStyleHidingComponent,
+        IgxExcelStyleSelectingComponent,
+        IgxExcelStyleClearFiltersComponent,
+        IgxExcelStyleConditionalFilterComponent,
+        IgxExcelStyleMovingComponent,
+        IgxExcelStyleSearchComponent,
+        IgxExcelStyleCustomDialogComponent,
+        IgxExcelStyleDefaultExpressionComponent,
+        IgxExcelStyleDateExpressionComponent,
+        IgxExcelStyleColumnOperationsTemplateDirective,
+        IgxExcelStyleFilterOperationsTemplateDirective,
+        IgxExcelStyleLoadingValuesTemplateDirective
+    ],
+    exports: [
+        IgxGridExcelStyleFilteringComponent,
+        IgxExcelStyleColumnOperationsTemplateDirective,
+        IgxExcelStyleFilterOperationsTemplateDirective,
+        IgxExcelStyleLoadingValuesTemplateDirective,
+        IgxExcelStyleDateExpressionComponent,
+        IgxExcelStyleHeaderComponent,
+        IgxExcelStyleSortingComponent,
+        IgxExcelStylePinningComponent,
+        IgxExcelStyleHidingComponent,
+        IgxExcelStyleSelectingComponent,
+        IgxExcelStyleClearFiltersComponent,
+        IgxExcelStyleConditionalFilterComponent,
+        IgxExcelStyleMovingComponent,
+        IgxExcelStyleSearchComponent,
+        IgxExcelStyleHeaderComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        IgxGridPipesModule,
+        IgxButtonModule,
+        IgxButtonGroupModule,
+        IgxDatePickerModule,
+        IgxTimePickerModule,
+        IgxIconModule,
+        IgxRippleModule,
+        IgxInputGroupModule,
+        IgxDropDownModule,
+        IgxForOfModule,
+        IgxCheckboxModule,
+        IgxFilterModule,
+        IgxToggleModule,
+        IgxListModule,
+        IgxProgressBarModule,
+        IgxSelectModule,
+        IgxFocusModule,
+        IgxDateTimeEditorModule,
+        IgxTreeModule
+    ],
+    providers: [
+        IgxSelectionAPIService
+    ]
 })
-export class IgxGridExcelStyleFilteringModule {
-
-}
+export class IgxGridExcelStyleFilteringModule { }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 104a479d558..883c8ca2baa 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -77,7 +77,7 @@ import { IgxExcelStyleLoadingValuesTemplateDirective } from './filtering/excel-s
 import { IgxGridColumnResizerComponent } from './resizing/resizer.component';
 import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
 import { IgxColumnResizingService } from './resizing/resizing.service';
-import { IFilteringStrategy } from '../data-operations/filtering-strategy';
+import { FilteringStrategy, IFilteringStrategy } from '../data-operations/filtering-strategy';
 import {
     IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective,
     IgxHeaderCollapseIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective,
@@ -1062,7 +1062,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     /**
      * Emitted before the grid's data view is changed because of a data operation, rebinding, etc.
-     * 
+     *
      * @example
      * ```typescript
      *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
@@ -1073,7 +1073,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     /**
      * Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
-     * 
+     *
      * @example
      * ```typescript
      *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
@@ -1081,7 +1081,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @Output()
     public dataChanged = new EventEmitter<any>();
- 
+
 
     /**
      * @hidden @internal
@@ -2085,11 +2085,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @Input()
     public get filterStrategy(): IFilteringStrategy {
-        return this._filteringStrategy;
+        return this._filterStrategy;
     }
 
     public set filterStrategy(classRef: IFilteringStrategy) {
-        this._filteringStrategy = classRef;
+        this._filterStrategy = classRef;
     }
 
     /**
@@ -2763,6 +2763,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _userOutletDirective: IgxOverlayOutletDirective;
     protected _transactions: TransactionService<Transaction, State>;
     protected _batchEditing = false;
+    protected _filterStrategy: IFilteringStrategy = new FilteringStrategy();
     protected _autoGeneratedCols = [];
     protected _dataView = [];
 
@@ -2790,7 +2791,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _isLoading = false;
     private _locale: string;
     private overlayIDs = [];
-    private _filteringStrategy: IFilteringStrategy;
     private _sortingStrategy: IGridSortingStrategy;
     private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start };
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
index 3592cea2a52..2f4988df272 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -42,11 +42,12 @@ import {
     CustomFilteringStrategyComponent,
     IgxGridExternalESFComponent,
     IgxGridExternalESFTemplateComponent,
-    IgxGridDatesFilteringComponent
+    IgxGridDatesFilteringComponent,
+    LoadOnDemandFilterStrategy
 } from '../../test-utils/grid-samples.spec';
 import { GridSelectionMode, FilterMode } from '../common/enums';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
-import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { FilteringStrategy, FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IgxInputGroupComponent } from '../../input-group/public_api';
 import { formatDate } from '../../core/utils';
 import { IgxCalendarComponent } from '../../calendar/calendar.component';
@@ -3276,6 +3277,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
 
             expect(grid.filteredData.length).toEqual(2);
 
@@ -3307,6 +3310,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
 
             expect(grid.filteredData.length).toEqual(2);
 
@@ -3327,6 +3332,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
         it('Should not be able to exit custom dialog when press tab on apply button', fakeAsync(() => {
             GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(100);
+            fix.detectChanges();
 
             GridFunctions.clickExcelFilterCascadeButton(fix);
             tick();
@@ -5719,8 +5726,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
     describe('Load values on demand', () => {
         let fix;
+        let grid: IgxGridComponent;
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(IgxGridFilteringESFLoadOnDemandComponent);
+            grid = fix.componentInstance.grid;
             fix.detectChanges();
         }));
 
@@ -5746,6 +5755,32 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(loadingIndicator).toBeNull('esf loading indicator is visible');
         }));
 
+        it('Verify unique values are loaded correctly in ESF search component when using filtering strategy.', fakeAsync(() => {
+            grid.uniqueColumnValuesStrategy = undefined;
+            grid.filterStrategy = new LoadOnDemandFilterStrategy();
+            fix.detectChanges();
+
+            // Open excel style custom filtering dialog and wait a bit.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(400);
+            fix.detectChanges();
+
+            // Verify items in search have not loaded yet and that the loading indicator is visible.
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(0, 'incorrect rendered list items count');
+            let loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).not.toBeNull('esf loading indicator is not visible');
+
+            // Wait for items to load.
+            tick(650);
+
+            // Verify items in search have loaded and that the loading indicator is not visible.
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(6, 'incorrect rendered list items count');
+            loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).toBeNull('esf loading indicator is visible');
+        }));
+
         it('Verify unique date values are loaded correctly in ESF search component.', fakeAsync(() => {
             // Open excel style custom filtering dialog and wait a bit.
             GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
@@ -5834,7 +5869,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 return newRec;
             });
             const dates = fix.componentInstance.data.filter(el => el.ReleaseDate).map(el => new Date(el.ReleaseDate)).sort((a, b) => a - b);
-            const grid = fix.componentInstance.grid;
             grid.locale = 'fr-FR';
             const datePipe = new DatePipe(grid.locale);
             const formatOptions = {
@@ -5882,7 +5916,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 newRec.ReleaseDate = rec.ReleaseDate ? rec.ReleaseDate.getTime() : null;
                 return newRec;
             });
-            const grid = fix.componentInstance.grid;
             grid.locale = 'fr-FR';
             const datePipe = new DatePipe(grid.locale);
             grid.getColumnByName('ReleaseDate').formatter = ((value: any) => {
@@ -5903,7 +5936,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
             expect(listItems.length).toBe(8, 'incorrect rendered list items count');
 
-            expect(listItems[1].innerText).toBe('No value!');
+            expect(listItems[1].innerText).toBe('(Blanks)');
             for (let i = 2; i < listItems.length; i++) {
                 const date = dates[i];
                 const label = date !== null && date !== undefined && date !== '' ? datePipe.transform(date, 'longDate') : 'No value!';
@@ -5915,7 +5948,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
 
         it('Verify date values are displayed in correct format according to column formatter after filtering', fakeAsync(() => {
-            const grid = fix.componentInstance.grid;
             grid.locale = 'fr-FR';
             const datePipe = new DatePipe(grid.locale);
             grid.getColumnByName('ReleaseDate').formatter = ((value: any) => {
@@ -5953,7 +5985,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
             expect(listItems.length).toBe(8, 'incorrect rendered list items count');
 
-            expect(listItems[1].innerText).toBe('No value!');
+            expect(listItems[1].innerText).toBe('(Blanks)');
             for (let i = 2; i < listItems.length; i++) {
                 const date = dates[i - 2];
                 const label = date !== null && date !== undefined && date !== '' ? datePipe.transform(date, 'longDate') : 'No value!';
@@ -5964,49 +5996,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(loadingIndicator).toBeNull('esf loading indicator is visible');
         }));
 
-        it('Verify ESF list items when different date values produce same value label in the ESF list', fakeAsync(() => {
-            const grid = fix.componentInstance.grid;
-            grid.getColumnByName('ReleaseDate').formatter = ((value: any) => {
-                const pipe = new DatePipe(grid.locale);
-                const val = value !== null && value !== undefined && value !== '' ? pipe.transform(value, 'longTime') : 'No value!';
-                return val;
-            });
-            fix.detectChanges();
-
-            // Open excel style custom filtering dialog and wait a bit.
-            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
-            tick(1050);
-            fix.detectChanges();
-
-            // Verify items in search have loaded and that the loading indicator is not visible.
-            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
-            const uniqueValues = new Set<string>();
-            grid.data.forEach(r => {
-                const val = grid.getColumnByName('ReleaseDate').formatter(r.ReleaseDate);
-                uniqueValues.add(val);
-            });
-            // +1 stands for the Select All option
-            expect(listItems.length).toBe(uniqueValues.size + 1, 'incorrect rendered list items count');
-
-            const checkboxElements = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
-            checkboxElements[0].click();
-            tick();
-            fix.detectChanges();
-
-            checkboxElements[2].click();
-            tick();
-            fix.detectChanges();
-
-            GridFunctions.clickApplyExcelStyleFiltering(fix);
-            fix.detectChanges();
-
-            expect(grid.filteredData.length).toEqual(1);
-            expect(grid.filteredData[0].Downloads).toEqual(254);
-
-            tick(1050);
-            fix.detectChanges();
-        }));
-
         it('Done callback should be executed only once per column', fakeAsync(() => {
             const compInstance = fix.componentInstance as IgxGridFilteringESFLoadOnDemandComponent;
             // Open excel style custom filtering dialog and wait a bit.
@@ -6126,7 +6115,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(grid.columnList.get(1).hidden).toBeTruthy();
         }));
 
-        it('Column selection button should be visible/hidden when column is selectable/not selectable', () => {
+        it('Column selection button should be visible/hidden when column is selectable/not selectable', fakeAsync(() => {
             grid.columnSelection = GridSelectionMode.multiple;
             fix.detectChanges();
 
@@ -6135,6 +6124,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             const esf = fix.componentInstance.esf;
             esf.column = grid.getColumnByName('Downloads');
+            tick();
             fix.detectChanges();
 
             columnSelectionContainer = GridFunctions.getExcelFilteringColumnSelectionContainer(fix);
@@ -6146,9 +6136,9 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             columnSelectionContainer = GridFunctions.getExcelFilteringColumnSelectionContainer(fix);
             expect(columnSelectionContainer).toBeNull();
-        });
+        }));
 
-        it('should select/deselect column when interact with the column selection item through esf menu', () => {
+        it('should select/deselect column when interact with the column selection item through esf menu', fakeAsync(() => {
             // Test in single multiple mode
             grid.columnSelection = GridSelectionMode.multiple;
             fix.detectChanges();
@@ -6156,6 +6146,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             spyOn(grid.columnSelectionChanging, 'emit');
             const column = grid.getColumnByName('Downloads');
             fix.componentInstance.esf.column = column;
+            tick();
             fix.detectChanges();
 
             GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix);
@@ -6187,7 +6178,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(column, true);
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
-        });
+        }));
 
     });
 });
@@ -6213,7 +6204,8 @@ describe('IgxGrid - Custom Filtering Strategy #grid', () => {
     }));
 
     it('Should be able to set custom filtering strategy', () => {
-        expect(grid.filterStrategy).toBeUndefined();
+        expect(grid.filterStrategy).toBeDefined();
+        expect(grid.filterStrategy).toBeInstanceOf(FilteringStrategy);
         grid.filterStrategy = fix.componentInstance.strategy;
         fix.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
index 3ef96af89da..0b02d8ddb85 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
@@ -6,7 +6,7 @@ import { IGroupByResult } from '../../data-operations/grouping-result.interface'
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
-import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { FilterUtil, IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { GridPagingMode } from '../common/enums';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
 import { IGridSortingStrategy, IGridGroupingStrategy } from '../common/strategy';
@@ -123,7 +123,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
             return collection;
         }
 
-        const result = DataUtil.filter(cloneArray(collection), state, this.grid);
+        const result = FilterUtil.filter(cloneArray(collection), state, this.grid);
         this.grid.setFilteredData(result, pinned);
         return result;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
index 0029575a64c..dcb8262867d 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -68,6 +68,7 @@ import { IgxPivotGridColumnResizerComponent } from '../resizing/pivot-grid/pivot
 import { IgxActionStripComponent } from '../../action-strip/action-strip.component';
 import { IPageEventArgs } from '../../paginator/paginator-interfaces';
 import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy';
+import { FilterUtil } from '../../data-operations/filtering-strategy';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -956,7 +957,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
             advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
         };
-        const filtered = DataUtil.filter(data, state, this);
+        const filtered = FilterUtil.filter(data, state, this);
         const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
             filtered,
             [dim],
@@ -1957,7 +1958,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                     strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
                     advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
                 };
-                const filtered = DataUtil.filter(cloneArray(value.records), state, this);
+                const filtered = FilterUtil.filter(cloneArray(value.records), state, this);
                 if (filtered.length === 0) {
                     shouldGenerate = false;
                 }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
index 7be6de4fb1d..e497b265951 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
@@ -2,7 +2,7 @@ import { Inject, Pipe, PipeTransform } from '@angular/core';
 import { cloneArray } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
-import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { FilterUtil, IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import {
     DefaultPivotGridRecordSortingStrategy,
     DefaultPivotSortingStrategy, DimensionValuesFilteringStrategy, PivotColumnDimensionsStrategy,
@@ -255,7 +255,7 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
             return collection;
         }
 
-        const result = DataUtil.filter(cloneArray(collection, true), state, this.gridAPI.grid);
+        const result = FilterUtil.filter(cloneArray(collection, true), state, this.gridAPI.grid);
 
         return result;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts
index 86cb92fd210..fd7277bac99 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts
@@ -7,6 +7,9 @@ import { cloneArray, mergeObjects } from '../../core/utils';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { TreeGridFilteringStrategy } from './tree-grid.filtering.strategy';
 import { ColumnType, GridType } from '../common/grid.interface';
+import { ISortingExpression } from '../../data-operations/sorting-strategy';
+import { IgxDataRecordSorting } from '../common/strategy';
+import { FilterUtil } from '../../data-operations/filtering-strategy';
 
 @Injectable()
 export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
@@ -225,6 +228,24 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
     }
 
     public filterDataByExpressions(expressionsTree: IFilteringExpressionsTree): any[] {
+        let records = this.filterTreeDataByExpressions(expressionsTree);
+        const data = [];
+
+        this.getFlatDataFromFilteredRecords(records, data);
+
+        return data;
+    }
+
+    public sortDataByExpressions(data: ITreeGridRecord[], expressions: ISortingExpression[]) {
+        const records: ITreeGridRecord[] = DataUtil.sort(
+            cloneArray(data),
+            expressions,
+            this.grid.sortStrategy ?? new IgxDataRecordSorting(),
+            this.grid);
+        return records.map(r => r.data);
+    }
+
+    public filterTreeDataByExpressions(expressionsTree: IFilteringExpressionsTree): ITreeGridRecord[] {
         let records = this.grid.rootRecords;
 
         if (expressionsTree.filteringOperands.length) {
@@ -232,13 +253,10 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
                 expressionsTree,
                 strategy: this.grid.filterStrategy ?? new TreeGridFilteringStrategy()
             };
-            records = DataUtil.filter(cloneArray(records), state, this.grid);
+            records = FilterUtil.filter(cloneArray(records), state, this.grid);
         }
 
-        const data = [];
-        this.getFlatDataFromFilteredRecords(records, data);
-
-        return data;
+        return records;
     }
 
     protected update_row_in_array(value: any, rowID: any, index: number) {
@@ -308,7 +326,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
 
         for (const record of records) {
             if (!record.isFilteredOutParent) {
-                data.push(record.data);
+                data.push(record);
             }
             this.getFlatDataFromFilteredRecords(record.children, data);
         }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts
index a4fbacedbb5..c04d643d430 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts
@@ -2,16 +2,19 @@
 import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxTreeGridModule, IgxTreeGridComponent } from './public_api';
-import { IgxTreeGridFilteringComponent, IgxTreeGridFilteringRowEditingComponent } from '../../test-utils/tree-grid-components.spec';
+import { IgxTreeGridFilteringComponent, IgxTreeGridFilteringESFTemplatesComponent, IgxTreeGridFilteringRowEditingComponent } from '../../test-utils/tree-grid-components.spec';
 import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxStringFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand } from '../../data-operations/filtering-condition';
 import { FilteringStrategy } from '../../data-operations/filtering-strategy';
-import { TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy } from './tree-grid.filtering.strategy';
+import { TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy } from './tree-grid.filtering.strategy';
 import { FilterMode } from '../common/enums';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
-import { wait } from '../../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { By } from '@angular/platform-browser';
+
+const IGX_CHECKBOX_LABEL = '.igx-checkbox__label';
 
 describe('IgxTreeGrid - Filtering actions #tGrid', () => {
     configureTestSuite();
@@ -21,7 +24,9 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
-                IgxTreeGridFilteringComponent, IgxTreeGridFilteringRowEditingComponent
+                IgxTreeGridFilteringComponent,
+                IgxTreeGridFilteringRowEditingComponent,
+                IgxTreeGridFilteringESFTemplatesComponent
             ],
             imports: [
                 BrowserAnimationsModule,
@@ -296,7 +301,7 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
         grid.filter('ID', 1, IgxNumberFilteringOperand.instance().condition('equals'));
         fix.detectChanges();
         rows = TreeGridFunctions.getAllRows(fix);
-        expect(rows.length).toEqual(16, 'Wrong rows count');
+        expect(rows.length).toEqual(17, 'Wrong rows count');
     });
 
     it('\'Blanks\' should be always visible', (async () => {
@@ -350,6 +355,413 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
         expect(items[1].textContent).toBe(' (Blanks) ');
     }));
 
+    describe('Tree grid ESF', () => {
+        let tGrid: IgxTreeGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxTreeGridFilteringComponent);
+            fix.detectChanges();
+            tick(16);
+            tGrid = fix.componentInstance.treeGrid;
+
+            const hierarchicalFilterStrategy = new TreeGridFilteringStrategy(['ID']);
+            tGrid.filterStrategy = hierarchicalFilterStrategy;
+            tGrid.allowFiltering = true;
+            tGrid.filterMode = FilterMode.excelStyleFilter;
+            fix.detectChanges();
+        }));
+
+        it('Should render and expand tree nodes correctly', (async () => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            await wait(100);
+            fix.detectChanges();
+
+            let treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, null);
+            expect(treeItems.length).toBe(4, 'incorrect rendered tree node count');
+
+            GridFunctions.clickExcelTreeNodeExpandIcon(fix, 0);
+            await wait(100);
+            fix.detectChanges();
+
+            treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, null);
+            expect(treeItems.length).toBe(6, 'incorrect rendered tree node count');
+        }));
+
+        it('Should change arrow icon on expand', fakeAsync (() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const icon = GridFunctions.getExcelFilterTreeNodeIcon(fix, 0);
+            let iconText = icon.children[0].innerText;
+            expect(iconText).toBe('keyboard_arrow_right', 'incorrect rendered icon');
+
+            GridFunctions.clickExcelTreeNodeExpandIcon(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            iconText = icon.children[0].innerText;
+            expect(iconText).toBe('keyboard_arrow_down', 'incorrect rendered icon');
+        }));
+
+        it('Should display Select All item', (async () => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            await wait(100);
+            fix.detectChanges();
+
+            const label = fix.debugElement.queryAll(By.css(IGX_CHECKBOX_LABEL))[0].nativeElement;
+            expect(label.innerText).toBe('Select All');
+        }));
+
+        it('Should display "Add current selection to filter" item correctly', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '1', fix);
+            tick(100);
+            fix.detectChanges();
+
+            const label = fix.debugElement.queryAll(By.css(IGX_CHECKBOX_LABEL))[1].nativeElement;
+            expect(label.innerText).toBe('Add current selection to filter');
+        }));
+
+        it('Should set indeterminate state correctly', fakeAsync (() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickExcelTreeNodeExpandIcon(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+
+            let checkboxes: any[] = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid');
+            checkboxes[2].parentElement.click();
+            tick(100);
+            fix.detectChanges();
+
+            checkboxes = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid'));
+            expect(checkboxes[0].indeterminate && !checkboxes[0].checked).toBe(true);
+            expect(checkboxes[1].indeterminate && !checkboxes[1].checked).toBe(true);
+            expect(checkboxes[2].checked).toBe(false);
+        }));
+
+        it('Should filter items and clear the search component correctly', async () => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            await wait(100);
+            fix.detectChanges();
+
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+
+            let treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toBe(4, 'incorrect rendered items count');
+
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '6', fix);
+            await wait(100);
+            fix.detectChanges();
+
+            treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toBe(2, 'incorrect rendered items count');
+
+            const clearIcon: any = Array.from(searchComponent.querySelectorAll('igx-icon'))
+                .find((icon: any) => icon.innerText === 'clear');
+
+            clearIcon.click();
+            fix.detectChanges();
+
+            treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toBe(4, 'incorrect rendered items count');
+        });
+
+        it('Should filter items and clear filters correctly', fakeAsync(() => {
+            let gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(18);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            let searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            let treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toBe(4, 'incorrect rendered items count');
+
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '8', fix);
+            tick(100);
+            fix.detectChanges();
+
+            treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toBe(4, 'incorrect rendered items count');
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(7);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+            const btn = GridFunctions.getExcelFilteringClearFiltersComponent(fix, excelMenu);
+            const clearIcon: any = btn.querySelector('igx-icon');
+            clearIcon.click();
+            tick(100);
+            fix.detectChanges();
+
+            searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toBe(4, 'incorrect rendered tree node items count');
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(18, 'incorrect rendered grid items count');
+        }));
+
+        it('Should update checkboxes after clearing column filters correctly', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            let searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '8', fix);
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+            const btn = GridFunctions.getExcelFilteringClearFiltersComponent(fix, excelMenu);
+            const clearIcon: any = btn.querySelector('igx-icon');
+            clearIcon.click();
+            tick(100);
+            fix.detectChanges();
+
+            let checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid'));
+            checkboxes.forEach(ch => expect(ch.checked).toBe(true, 'incorrect checkbox state'));
+
+            searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '8', fix);
+            tick(100);
+            fix.detectChanges();
+
+            checkboxes = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid'));
+            const addToFilterCheckbox = checkboxes.splice(1,1)[0];
+
+            expect(addToFilterCheckbox.checked).toBe(false, 'incorrect checkbox state')
+            checkboxes.forEach(ch => expect(ch.checked).toBe(true, 'incorrect checkbox state'));
+        }));
+
+        it('Should filter tree grid correctly', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '6', fix);
+            tick(100);
+            fix.detectChanges();
+
+            const treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toEqual(2, 'incorrect rendered items count');
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            const gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(3);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+            let checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid'));
+            expect(!checkboxes[1].checked && !checkboxes[2].checked && !checkboxes[3].checked && checkboxes[4].indeterminate).toBe(true);
+        }));
+
+        it('Should add list items to current filtered items when "Add current selection to filter" is selected', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            let searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '6', fix);
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            let gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(3);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '15', fix);
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+            const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid')[1];
+            checkbox.click();
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(5);
+        }));
+
+        it('Should display message when search results are empty', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            let searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '77', fix);
+            tick(100);
+            fix.detectChanges();
+
+            const emptyTextEl = searchComponent.querySelector('.igx-excel-filter__empty');
+            expect(emptyTextEl.innerText).toEqual('No matches');
+        }));
+    });
+
+    describe('Tree grid ESF templates', () => {
+        let tGrid: IgxTreeGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxTreeGridFilteringESFTemplatesComponent);
+            fix.detectChanges();
+            tick(16);
+            tGrid = fix.componentInstance.treeGrid;
+
+            const hierarchicalFilterStrategy = new TreeGridFilteringStrategy(['ID']);
+            tGrid.filterStrategy = hierarchicalFilterStrategy;
+            tGrid.allowFiltering = true;
+            tGrid.filterMode = FilterMode.excelStyleFilter;
+            fix.detectChanges();
+        }));
+
+        it('Should use custom templates for ESF components instead of default ones.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+
+            expect(excelMenu.querySelector('igx-excel-style-column-operations')).not.toBeNull();
+            expect(excelMenu.querySelector('igx-excel-style-filter-operations')).not.toBeNull();
+            expect(GridFunctions.getExcelFilteringSortComponent(fix, excelMenu)).not.toBeNull();
+            expect(GridFunctions.getExcelFilteringSearchComponent(fix, excelMenu)).not.toBeNull();
+
+            expect(GridFunctions.getExcelFilteringHeaderComponent(fix, excelMenu)).toBeNull();
+            expect(GridFunctions.getExcelFilteringMoveComponent(fix, excelMenu)).toBeNull();
+            expect(GridFunctions.getExcelFilteringPinComponent(fix, excelMenu)).toBeNull();
+            expect(GridFunctions.getExcelFilteringHideComponent(fix, excelMenu)).toBeNull();
+            expect(GridFunctions.getExcelFilteringColumnSelectionComponent(fix, excelMenu)).toBeNull();
+            expect(GridFunctions.getExcelFilteringClearFiltersComponent(fix, excelMenu)).toBeNull();
+            expect(GridFunctions.getExcelFilteringConditionalFilterComponent(fix, excelMenu)).toBeNull();
+        }));
+
+        it('Should filter tree grid with templates correctly', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix, null, 'igx-tree-grid');
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent, 'igx-tree-grid');
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '6', fix);
+            tick(100);
+            fix.detectChanges();
+
+            const treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fix, searchComponent);
+            expect(treeItems.length).toEqual(2, 'incorrect rendered items count');
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            tick(100);
+            fix.detectChanges();
+
+            const gridCellValues = GridFunctions.getColumnCells(fix, 'ID', 'igx-tree-grid-cell')
+                .map(c => c.nativeElement.innerText)
+                .sort();
+
+            expect(gridCellValues.length).toEqual(3);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'ID');
+            tick(100);
+            fix.detectChanges();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+            let checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid'));
+            expect(!checkboxes[1].checked && !checkboxes[2].checked && !checkboxes[3].checked && checkboxes[4].indeterminate).toBe(true);
+        }));
+
+        it('Should use custom excel style filter icon instead of default one.', fakeAsync(() => {
+            const header = GridFunctions.getColumnHeader('ID', fix);
+            fix.detectChanges();
+            const icon = GridFunctions.getHeaderFilterIcon(header);
+            fix.detectChanges();
+            expect(icon).not.toBeNull();
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('filter_alt');
+        }));
+    });
+
     describe('Filtering: Row editing', () => {
         let treeGrid: IgxTreeGridComponent;
         beforeEach(fakeAsync(/** height/width setter rAF */() => {
@@ -462,7 +874,7 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
             }));
 
             it('should be able to apply custom filter strategy', fakeAsync(() => {
-                expect(treeGrid.filterStrategy).toBeUndefined();
+                expect(treeGrid.filterStrategy).toBeDefined();
                 treeGrid.filter('Name', 'd', IgxStringFilteringOperand.instance().condition('contains'), true);
                 tick(30);
                 fix.detectChanges();
@@ -486,7 +898,7 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
             }));
 
             it('should display only the filtered records when using TreeGridMatchingRecordsOnlyFilteringStrategy', fakeAsync(() => {
-                expect(treeGrid.filterStrategy).toBeUndefined();
+                expect(treeGrid.filterStrategy).toBeDefined();
                 treeGrid.filter('Name', 'Trevor', IgxStringFilteringOperand.instance().condition('contains'), true);
                 tick(30);
                 fix.detectChanges();
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
index cb461a85083..0b0912048a4 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -58,6 +58,7 @@ import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/density'
 import { HierarchicalTransactionService } from '../../services/transaction/hierarchical-transaction';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { IgxGridTransaction } from '../common/types';
+import { TreeGridFilteringStrategy } from './tree-grid.filtering.strategy';
 
 let NEXT_ID = 0;
 
@@ -271,6 +272,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
      */
     public loadingRows = new Set<any>();
 
+    protected _filterStrategy = new TreeGridFilteringStrategy();
     protected _transactions: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>;
     private _data;
     private _rowLoadingIndicatorTemplate: TemplateRef<any>;
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.strategy.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.strategy.ts
index 8d05210b880..53bb92a75f7 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.strategy.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.strategy.ts
@@ -1,23 +1,45 @@
 import { parseDate, resolveNestedPath } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
-import { BaseFilteringStrategy } from '../../data-operations/filtering-strategy';
-import { GridType } from '../common/grid.interface';
+import { BaseFilteringStrategy, IgxFilterItem } from '../../data-operations/filtering-strategy';
+import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { ColumnType, GridType } from '../common/grid.interface';
+import { IgxTreeGridAPIService } from './tree-grid-api.service';
 import { ITreeGridRecord } from './tree-grid.interfaces';
 
 export class TreeGridFilteringStrategy extends BaseFilteringStrategy {
+
+    constructor(public hierarchicalFilterFields?: string[]) {
+        super();
+    }
+
     public filter(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
         advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[] {
         return this.filterImpl(data, expressionsTree, advancedExpressionsTree, undefined, grid);
     }
 
-    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false): any {
+    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: GridType): any {
+        const column = grid?.getColumnByName(fieldName);
         const hierarchicalRecord = rec as ITreeGridRecord;
-        let value = resolveNestedPath(hierarchicalRecord.data, fieldName);
-        value = value && isDate ? parseDate(value) : value;
+        let value = this.isHierarchicalFilterField(fieldName) ?
+            this.getHierarchicalFieldValue(hierarchicalRecord, fieldName) :
+            resolveNestedPath(hierarchicalRecord.data, fieldName);
+
+        value = column?.formatter && this.shouldFormatFilterValues(column) ?
+            column.formatter(value, rec.data) :
+            value && (isDate || isTime) ? parseDate(value) : value;
+
         return value;
     }
 
+    private getHierarchicalFieldValue(record: ITreeGridRecord, field: string) {
+        const value = resolveNestedPath(record.data, field);
+
+        return record.parent ?
+            `${this.getHierarchicalFieldValue(record.parent, field)}${value ? `.[${value}]` : ''}` :
+            `[${value}]`;
+    }
+
     private filterImpl(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
         advancedExpressionsTree: IFilteringExpressionsTree, parent: ITreeGridRecord, grid?: GridType): ITreeGridRecord[] {
         let i: number;
@@ -44,6 +66,49 @@ export class TreeGridFilteringStrategy extends BaseFilteringStrategy {
         }
         return res;
     }
+
+    private isHierarchicalFilterField(field: string) {
+        return this.hierarchicalFilterFields && this.hierarchicalFilterFields.indexOf(field) !== -1;
+    }
+
+    public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
+        if (!this.isHierarchicalFilterField(column.field)) {
+            return super.getFilterItems(column, tree);
+        }
+
+        let data = (column.grid.gridAPI as IgxTreeGridAPIService).filterTreeDataByExpressions(tree);
+        data = DataUtil.treeGridSort(
+            data,
+            [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }],
+            column.grid.sortStrategy,
+            null,
+            column.grid);
+
+        const items = this.getHierarchicalFilterItems(data, column);
+
+
+        return Promise.resolve(items);
+    }
+
+    private getHierarchicalFilterItems(records: ITreeGridRecord[], column: ColumnType, parent?: IgxFilterItem): IgxFilterItem[] {
+        return records?.map(record => {
+            let value = resolveNestedPath(record.data, column.field);
+            const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
+
+            value = applyFormatter ?
+                column.formatter(value, record.data) :
+                value;
+
+            const hierarchicalValue = parent ?
+                (value || value === 0) ? `${parent.value}.[${value}]` : value :
+                `[${value}]`;
+
+            const filterItem: IgxFilterItem = { value: hierarchicalValue };
+            filterItem.label = this.getFilterItemLabel(column, value, !applyFormatter, record.data);
+            filterItem.children = this.getHierarchicalFilterItems(record.children, column, filterItem);
+            return filterItem;
+        });
+    }
 }
 
 export class TreeGridFormattedValuesFilteringStrategy extends TreeGridFilteringStrategy {
@@ -57,21 +122,8 @@ export class TreeGridFormattedValuesFilteringStrategy extends TreeGridFilteringS
         super();
     }
 
-    /** @hidden */
-    public shouldApplyFormatter(fieldName: string): boolean {
-        return !this.fields || this.fields.length === 0 || this.fields.some(f => f === fieldName);
-    }
-
-    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: GridType): any {
-        const column = grid.getColumnByName(fieldName);
-        const hierarchicalRecord = rec as ITreeGridRecord;
-        let value = resolveNestedPath(hierarchicalRecord.data, fieldName);
-
-        value = column.formatter && this.shouldApplyFormatter(fieldName) ?
-            column.formatter(value) :
-            value && (isDate || isTime) ? parseDate(value) : value;
-
-        return value;
+    protected shouldFormatFilterValues(column: ColumnType): boolean {
+        return !this.fields || this.fields.length === 0 || this.fields.some(f => f === column.field);
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts
index 109ecb789dd..554ee8b9b92 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe.ts
@@ -31,9 +31,13 @@ export class IgxGroupedTreeGridSorting extends IgxSorting {
     }
 
     protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
-        return obj.data[HIDDEN_FIELD_NAME] ?
-            super.getFieldValue(obj.data[HIDDEN_FIELD_NAME], key, isDate, isTime) :
-            super.getFieldValue(obj.data, key, isDate, isTime);
+        const data = obj.data[HIDDEN_FIELD_NAME] ?
+            obj.data.hasOwnProperty(key) ?
+                obj.data :
+                obj.data[HIDDEN_FIELD_NAME] :
+            obj.data;
+
+        return super.getFieldValue(data, key, isDate, isTime);
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.module.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.module.ts
index dd1cf80b610..9333642d432 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.module.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.module.ts
@@ -42,7 +42,7 @@ import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-
     IgxTreeGridAddRowPipe
   ],
   imports: [
-    IgxGridCommonModule,
+    IgxGridCommonModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
index d2baa8b52e0..ef18d3bdac5 100644
--- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
+++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
@@ -12,6 +12,7 @@ import { IFilteringState } from '../../data-operations/filtering-state.interface
 import { DatePipe } from '@angular/common';
 import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
 import { ColumnType, GridType, IPathSegment } from '../../grids/common/grid.interface';
+import { FilterUtil } from '../../data-operations/filtering-strategy';
 
 export enum ExportRecordType {
     GroupedRecord = 'GroupedRecord',
@@ -520,7 +521,7 @@ export abstract class IgxBaseExporter {
                     strategy: grid.filterStrategy
                 };
 
-                data = DataUtil.filter(data, filteringState, grid);
+                data = FilterUtil.filter(data, filteringState, grid);
             }
 
             if (hasSorting && !this.options.ignoreSorting) {
@@ -594,7 +595,7 @@ export abstract class IgxBaseExporter {
                         strategy: islandGrid.filterStrategy
                     };
 
-                    data = DataUtil.filter(data, filteringState, islandGrid);
+                    data = FilterUtil.filter(data, filteringState, islandGrid);
                 }
 
                 if (hasSorting && !this.options.ignoreSorting) {
@@ -624,7 +625,7 @@ export abstract class IgxBaseExporter {
                         strategy: island.filterStrategy
                     };
 
-                    data = DataUtil.filter(data, filteringState, island);
+                    data = FilterUtil.filter(data, filteringState, island);
                 }
 
                 if (hasSorting && !this.options.ignoreSorting) {
@@ -721,7 +722,7 @@ export abstract class IgxBaseExporter {
                     strategy: grid.filterStrategy
                 };
 
-                gridData = DataUtil.filter(gridData, filteringState, grid);
+                gridData = FilterUtil.filter(gridData, filteringState, grid);
             }
 
             if (hasSorting && !this.options.ignoreSorting) {
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
index dd18c145267..cd4a9d74aad 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
@@ -26,6 +26,7 @@ import { IgxPivotRowComponent } from '../grids/pivot-grid/pivot-row.component';
 import { SortingDirection } from '../data-operations/sorting-strategy';
 import { IgxRowDirective } from '../grids/row.directive';
 import { GridType, RowType } from '../grids/common/grid.interface';
+import { IgxTreeNodeComponent } from '../tree/tree-node/tree-node.component';
 
 
 const SUMMARY_LABEL_CLASS = '.igx-grid-summary__label';
@@ -100,6 +101,7 @@ export const PAGER_CLASS = '.igx-page-nav';
 const RESIZE_LINE_CLASS = '.igx-grid-th__resize-line';
 const RESIZE_AREA_CLASS = '.igx-grid-th__resize-handle';
 const GRID_COL_THEAD_CLASS = '.igx-grid-th';
+const TREE_NODE_TOGGLE = '.igx-tree-node__toggle-button';
 
 export class GridFunctions {
 
@@ -698,6 +700,15 @@ export class GridFunctions {
         return columnHeader.querySelector(ESF_FILTER_ICON_FILTERED);
     }
 
+    /**
+     * Gets the ESF tree node icon
+     */
+     public static getExcelFilterTreeNodeIcon(fix: ComponentFixture<any>, index: number) {
+        const treeNodeEl = fix.debugElement.queryAll(By.directive(IgxTreeNodeComponent))[index]?.nativeElement;
+        const expandIcon = treeNodeEl.querySelector(TREE_NODE_TOGGLE);
+        return expandIcon;
+    }
+
     public static clickExcelFilterIcon(fix: ComponentFixture<any>, columnField: string) {
         const filterIcon = GridFunctions.getExcelFilterIcon(fix, columnField);
         const filterIconFiltered = GridFunctions.getExcelFilterIconFiltered(fix, columnField);
@@ -705,6 +716,11 @@ export class GridFunctions {
         UIInteractions.simulateClickAndSelectEvent(icon);
     }
 
+    public static clickExcelTreeNodeExpandIcon(fix: ComponentFixture<any>, index: number) {
+        const expandIcon = GridFunctions.getExcelFilterTreeNodeIcon(fix, index);
+        UIInteractions.simulateClickAndSelectEvent(expandIcon);
+    }
+
     public static clickExcelFilterIconFromCode(fix: ComponentFixture<any>, grid: IgxGridBaseDirective, columnField: string) {
         const event = { stopPropagation: () => { }, preventDefault: () => { } };
         const header = grid.getColumnByName(columnField).headerCell;
@@ -1047,6 +1063,11 @@ export class GridFunctions {
         return GridFunctions.sortNativeElementsVertically(Array.from(searchComponent.querySelectorAll('igx-list-item')));
     }
 
+    public static getExcelStyleSearchComponentTreeNodes(fix, comp = null, grid = 'igx-tree-grid'): HTMLElement[] {
+        const searchComponent = comp ? comp : GridFunctions.getExcelStyleSearchComponent(fix, null, grid);
+        return GridFunctions.sortNativeElementsVertically(Array.from(searchComponent.querySelectorAll('igx-tree-node')));
+    }
+
     public static getColumnHeaders(fix: ComponentFixture<any>): DebugElement[] {
         return fix.debugElement.queryAll(By.directive(IgxGridHeaderComponent));
     }
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
index 2292f4ba8cf..2805b82f5b9 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -11,7 +11,7 @@ import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDef
 import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
-import { FilteringStrategy } from '../data-operations/filtering-strategy';
+import { FilteringStrategy, IgxFilterItem } from '../data-operations/filtering-strategy';
 import { CellType, IgxGridComponent } from '../grids/grid/public_api';
 import { IgxRowEditTabStopDirective } from '../grids/grid.rowEdit.directive';
 import { IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/grid.excel-style-filtering.component';
@@ -20,6 +20,8 @@ import { ISortingStrategy, SortingDirection } from '../data-operations/sorting-s
 import { IgxActionStripComponent } from '../action-strip/action-strip.component';
 import { ExpressionUI } from '../grids/filtering/excel-style/common';
 import { IDataCloneStrategy } from '../data-operations/data-clone-strategy';
+import { GridColumnDataType } from '../data-operations/data-util';
+import { ColumnType } from '../grids/common/grid.interface';
 
 @Component({
     template: `<div style="width: 800px; height: 600px;">
@@ -1192,6 +1194,14 @@ export class CustomFilteringStrategyComponent extends BasicGridComponent {
     public data = SampleTestData.personNameObjectJobCompany();
 }
 
+
+export class LoadOnDemandFilterStrategy extends FilteringStrategy {
+    public override getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
+        return new Promise(resolve => setTimeout(() =>
+            resolve(super.getFilterItems(column, tree)), 1000));
+    }
+}
+
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true"
                          [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
index 7c470a6f443..c37f80385da 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
@@ -25,7 +25,7 @@ export class IgxTreeGridSortingComponent {
 
 @Component({
     template: `
-    <igx-tree-grid #treeGrid [data]="data" childDataKey="Employees" expansionDepth="2" width="900px" height="800px">
+    <igx-tree-grid #treeGrid [data]="data" childDataKey="Employees" expansionDepth="2" width="900px" height="1200px">
         <igx-column [field]="'ID'" dataType="number" [filterable]="true"></igx-column>
         <igx-column [field]="'Name'" dataType="string" [filterable]="true"></igx-column>
         <igx-column [field]="'HireDate'" dataType="date" [filterable]="true"></igx-column>
@@ -38,6 +38,34 @@ export class IgxTreeGridFilteringComponent {
     public data = SampleTestData.employeeTreeData();
 }
 
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid [data]="data" childDataKey="Employees" expansionDepth="2" width="900px" height="1200px">
+        <igx-column [field]="'ID'" dataType="number" [filterable]="true"></igx-column>
+        <igx-column [field]="'Name'" dataType="string" [filterable]="true"></igx-column>
+        <igx-column [field]="'HireDate'" dataType="date" [filterable]="true"></igx-column>
+        <igx-column [field]="'Age'" dataType="number" [filterable]="true"></igx-column>
+
+        <ng-template igxExcelStyleHeaderIcon>
+            <igx-icon>filter_alt</igx-icon>
+        </ng-template>
+
+        <igx-grid-excel-style-filtering [minHeight]="'0px'" [maxHeight]="'500px'">
+            <igx-excel-style-column-operations>
+                <igx-excel-style-sorting></igx-excel-style-sorting>
+            </igx-excel-style-column-operations>
+            <igx-excel-style-filter-operations>
+                <igx-excel-style-search></igx-excel-style-search>
+            </igx-excel-style-filter-operations>
+        </igx-grid-excel-style-filtering>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridFilteringESFTemplatesComponent {
+    @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
+    public data = SampleTestData.employeeTreeData();
+}
+
 @Component({
     template: `
     <igx-tree-grid #treeGrid [data]="data" childDataKey="Employees" primaryKey="ID" [selectedRows]="selectedRows"
diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html
index 609728a924f..4e67c029cab 100644
--- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html
+++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html
@@ -14,6 +14,7 @@
         [width]="'1200px'"
         [height]="'700px'"
         [sortStrategy]="sorting"
+        [filterStrategy]="filteringStrategy"
         [allowFiltering]="true"
         [filterMode]="'excelStyleFilter'"
         (cellEditDone)="cellEditDone()">
diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts b/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts
index e0c84c53120..2b809a51069 100644
--- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts
+++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxTreeGridComponent, IGroupingExpression,  GridSelectionMode,
-        DisplayDensity, DefaultSortingStrategy, ITreeGridRecord } from 'igniteui-angular';
+        DisplayDensity, DefaultSortingStrategy, ITreeGridRecord, TreeGridFilteringStrategy } from 'igniteui-angular';
 import { IgxGroupedTreeGridSorting, ITreeGridAggregation } from 'projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.grouping.pipe';
 import { SAMPLE_DATA } from '../shared/sample-data';
 
@@ -26,6 +26,7 @@ export class TreeGridGroupBySampleComponent implements OnInit {
     public groupKey = 'Groups';
     public childDataKey = 'ChildCompanies';
     public sorting = IgxGroupedTreeGridSorting.instance();
+    public filteringStrategy = new TreeGridFilteringStrategy([this.groupKey]);
 
     public employeeAggregations: ITreeGridAggregation[] = [{
         field: 'Employees',
diff --git a/src/app/tree-grid/tree-grid.sample.html b/src/app/tree-grid/tree-grid.sample.html
index ef967a923dd..af7c19c1707 100644
--- a/src/app/tree-grid/tree-grid.sample.html
+++ b/src/app/tree-grid/tree-grid.sample.html
@@ -6,7 +6,7 @@
     <igx-tree-grid #grid1 selectionType='multi' [batchEditing]="true" [data]="data"
         childDataKey="ChildCompanies" primaryKey="ID" [expansionDepth]="1"
         [rowSelection]="selectionMode" [displayDensity]="density" [width]="'900px'" [height]="'500px'"
-        [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'">
+        [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" [filterStrategy]="filterStrategy">
         <igx-grid-toolbar [displayDensity]="grid1.displayDensity">
             <app-grid-search-box [grid]="grid1" [style.width]="'300px'"></app-grid-search-box>
             <igx-grid-toolbar-actions>
diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts
index 6a198eb9133..8f7407e72dd 100644
--- a/src/app/tree-grid/tree-grid.sample.ts
+++ b/src/app/tree-grid/tree-grid.sample.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxTreeGridComponent, IgxExcelExporterService, IgxCsvExporterService,
-    IgxCsvExporterOptions, IgxExcelExporterOptions, CsvFileTypes, GridSelectionMode, DisplayDensity } from 'igniteui-angular';
+    IgxCsvExporterOptions, IgxExcelExporterOptions, CsvFileTypes, GridSelectionMode, DisplayDensity, TreeGridFilteringStrategy } from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
 @Component({
@@ -19,12 +19,13 @@ export class TreeGridSampleComponent implements OnInit {
     public density: DisplayDensity = 'comfortable';
     public displayDensities;
     public selectionModes: GridSelectionMode[] = ['none', 'single', 'multiple', 'multipleCascade'];
+    public filterStrategy = new TreeGridFilteringStrategy(['ID']);
 
     private nextRow = 1;
 
     constructor(private excelExporterService: IgxExcelExporterService,
-        private csvExporterService: IgxCsvExporterService) {
-}
+        private csvExporterService: IgxCsvExporterService) { }
+    
     public ngOnInit(): void {
         this.selectionMode = GridSelectionMode.multiple;
         this.displayDensities = [