─Animation
─Background
+ ─Highlight Needle
─Labels
─Measures
─Ranges
@@ -344,6 +350,7 @@
─Animation
─Backing
+ ─Highlight Needle
─Labels
─Needle
─Ranges
@@ -361,6 +368,7 @@
@@ -709,6 +781,11 @@
+
+
─Size
diff --git a/samples/charts/category-chart/highlighting-behavior/ReadMe.md b/samples/charts/category-chart/highlighting-behavior/ReadMe.md
new file mode 100644
index 0000000000..9e3d2e7dc3
--- /dev/null
+++ b/samples/charts/category-chart/highlighting-behavior/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Highlighting Behavior feature using [Category Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/category-chart/highlighting-behavior
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/category-chart/highlighting-mode/ReadMe.md b/samples/charts/category-chart/highlighting-mode/ReadMe.md
new file mode 100644
index 0000000000..d281b8e887
--- /dev/null
+++ b/samples/charts/category-chart/highlighting-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Highlighting Mode feature using [Category Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/category-chart/highlighting-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/category-chart/legend-highlighting/ReadMe.md b/samples/charts/category-chart/legend-highlighting/ReadMe.md
new file mode 100644
index 0000000000..aa76ad2c7b
--- /dev/null
+++ b/samples/charts/category-chart/legend-highlighting/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Legend Highlighting feature using [Category Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/category-chart/legend-highlighting
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/ReadMe.md b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/ReadMe.md
new file mode 100644
index 0000000000..4ebbdcde42
--- /dev/null
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Scatter Bubble Chart Fill Scale feature using [Data Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/data-chart/scatter-bubble-chart-fill-scale
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/tree-map/highlighting/ReadMe.md b/samples/charts/tree-map/highlighting/ReadMe.md
new file mode 100644
index 0000000000..c72dcd3b2c
--- /dev/null
+++ b/samples/charts/tree-map/highlighting/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Highlighting feature using [Tree Map](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/tree-map/highlighting
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/gauges/bullet-graph/highlight-needle/ReadMe.md b/samples/gauges/bullet-graph/highlight-needle/ReadMe.md
index 7a636ef7c0..47b7487fd8 100644
--- a/samples/gauges/bullet-graph/highlight-needle/ReadMe.md
+++ b/samples/gauges/bullet-graph/highlight-needle/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of highlight-needle feature using [Bullet Graph](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of Highlight Needle feature using [Bullet Graph](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
diff --git a/samples/gauges/linear-gauge/highlight-needle/ReadMe.md b/samples/gauges/linear-gauge/highlight-needle/ReadMe.md
index 30d706a9f0..dbddec0f75 100644
--- a/samples/gauges/linear-gauge/highlight-needle/ReadMe.md
+++ b/samples/gauges/linear-gauge/highlight-needle/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of highlight-needle feature using [Linear Gauge](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of Highlight Needle feature using [Linear Gauge](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
diff --git a/samples/grids/hierarchical-grid/action-strip/ReadMe.md b/samples/grids/hierarchical-grid/action-strip/ReadMe.md
new file mode 100644
index 0000000000..a92af205a5
--- /dev/null
+++ b/samples/grids/hierarchical-grid/action-strip/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Action Strip feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/action-strip
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/ReadMe.md b/samples/grids/hierarchical-grid/advanced-filtering-options/ReadMe.md
new file mode 100644
index 0000000000..46630b9385
--- /dev/null
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Advanced Filtering Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/advanced-filtering-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/ReadMe.md b/samples/grids/hierarchical-grid/advanced-filtering-style/ReadMe.md
new file mode 100644
index 0000000000..2ba04f2b6b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Advanced Filtering Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/advanced-filtering-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/ReadMe.md b/samples/grids/hierarchical-grid/cell-editing-sample/ReadMe.md
new file mode 100644
index 0000000000..6ffe37ddd8
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Editing Sample feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-editing-sample
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/ReadMe.md b/samples/grids/hierarchical-grid/cell-editing-styling/ReadMe.md
new file mode 100644
index 0000000000..c0923c020e
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Editing Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-editing-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-mode/ReadMe.md
new file mode 100644
index 0000000000..1d8b4b1695
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Selection Mode feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-selection-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-overview/ReadMe.md
new file mode 100644
index 0000000000..c48cd804eb
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Selection Overview feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-selection-overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-styling/ReadMe.md
new file mode 100644
index 0000000000..1890f5475c
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Selection Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-selection-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/ReadMe.md b/samples/grids/hierarchical-grid/column-collapsible-groups/ReadMe.md
new file mode 100644
index 0000000000..ec7028e355
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Collapsible Groups feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-collapsible-groups
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/ReadMe.md b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/ReadMe.md
new file mode 100644
index 0000000000..72fc4da13b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Hiding Toolbar Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-hiding-toolbar-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/ReadMe.md b/samples/grids/hierarchical-grid/column-hiding-toolbar/ReadMe.md
new file mode 100644
index 0000000000..b5d076ea78
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Hiding Toolbar feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-hiding-toolbar
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-moving-options/ReadMe.md b/samples/grids/hierarchical-grid/column-moving-options/ReadMe.md
new file mode 100644
index 0000000000..f4a21573f8
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-moving-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Moving Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-moving-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/ReadMe.md b/samples/grids/hierarchical-grid/column-moving-styles/ReadMe.md
new file mode 100644
index 0000000000..bea198a732
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-moving-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Moving Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-moving-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning-options/ReadMe.md
new file mode 100644
index 0000000000..1904398d54
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning-right-side/ReadMe.md
new file mode 100644
index 0000000000..463d3cacc3
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning Right Side feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning-right-side
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning-styles/ReadMe.md
new file mode 100644
index 0000000000..256d0675c6
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning/ReadMe.md
new file mode 100644
index 0000000000..e5b4eb1092
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-selection-group/ReadMe.md b/samples/grids/hierarchical-grid/column-selection-group/ReadMe.md
new file mode 100644
index 0000000000..53742f24bf
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-selection-group/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Selection Group feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-selection-group
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/ReadMe.md b/samples/grids/hierarchical-grid/column-selection-mode/ReadMe.md
new file mode 100644
index 0000000000..6c201c944b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-selection-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Selection Mode feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-selection-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/ReadMe.md b/samples/grids/hierarchical-grid/column-selection-styles/ReadMe.md
new file mode 100644
index 0000000000..90029d96db
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-selection-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Selection Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-selection-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/ReadMe.md b/samples/grids/hierarchical-grid/column-sorting-indicators/ReadMe.md
new file mode 100644
index 0000000000..ddb89c72da
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Sorting Indicators feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-sorting-indicators
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/ReadMe.md b/samples/grids/hierarchical-grid/column-sorting-options/ReadMe.md
new file mode 100644
index 0000000000..eab605a00f
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-sorting-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Sorting Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-sorting-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/ReadMe.md b/samples/grids/hierarchical-grid/column-sorting-style/ReadMe.md
new file mode 100644
index 0000000000..5a30867e21
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-sorting-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Sorting Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-sorting-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/ReadMe.md b/samples/grids/hierarchical-grid/conditional-cell-style-1/ReadMe.md
new file mode 100644
index 0000000000..c466661371
--- /dev/null
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Conditional Cell Style1 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/conditional-cell-style-1
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/ReadMe.md b/samples/grids/hierarchical-grid/conditional-cell-style-2/ReadMe.md
new file mode 100644
index 0000000000..f4bd16338a
--- /dev/null
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Conditional Cell Style2 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/conditional-cell-style-2
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/ReadMe.md b/samples/grids/hierarchical-grid/conditional-row-selectors/ReadMe.md
new file mode 100644
index 0000000000..262a7af991
--- /dev/null
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Conditional Row Selectors feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/conditional-row-selectors
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/custom-filtering/ReadMe.md b/samples/grids/hierarchical-grid/custom-filtering/ReadMe.md
new file mode 100644
index 0000000000..0efea94908
--- /dev/null
+++ b/samples/grids/hierarchical-grid/custom-filtering/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Custom Filtering feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/custom-filtering
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-formatter/ReadMe.md
new file mode 100644
index 0000000000..7ab9c938f2
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Formatter feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-formatter
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-options-styling/ReadMe.md
new file mode 100644
index 0000000000..09f518fde4
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Options Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-options-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-options/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-options/ReadMe.md
new file mode 100644
index 0000000000..fe97043633
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-template/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-template/ReadMe.md
new file mode 100644
index 0000000000..d032b0ceef
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-template/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Template feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-template
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/editing-columns/ReadMe.md b/samples/grids/hierarchical-grid/editing-columns/ReadMe.md
new file mode 100644
index 0000000000..d5c793632a
--- /dev/null
+++ b/samples/grids/hierarchical-grid/editing-columns/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Editing Columns feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/editing-columns
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/editing-events/ReadMe.md b/samples/grids/hierarchical-grid/editing-events/ReadMe.md
new file mode 100644
index 0000000000..07f66dbd36
--- /dev/null
+++ b/samples/grids/hierarchical-grid/editing-events/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Editing Events feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/editing-events
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/ReadMe.md b/samples/grids/hierarchical-grid/editing-lifecycle/ReadMe.md
new file mode 100644
index 0000000000..f70e6ff290
--- /dev/null
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Editing Lifecycle feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/editing-lifecycle
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-exporting/ReadMe.md b/samples/grids/hierarchical-grid/excel-exporting/ReadMe.md
new file mode 100644
index 0000000000..73b607837f
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-exporting/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Exporting feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-exporting
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/ReadMe.md
new file mode 100644
index 0000000000..807b444a17
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Sample1 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-sample-1
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/ReadMe.md
new file mode 100644
index 0000000000..75602661ea
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Sample2 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-sample-2
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/ReadMe.md
new file mode 100644
index 0000000000..6aa71d5b85
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Sample3 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-sample-3
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-style/ReadMe.md
new file mode 100644
index 0000000000..add01f8a86
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/filtering-options/ReadMe.md b/samples/grids/hierarchical-grid/filtering-options/ReadMe.md
new file mode 100644
index 0000000000..ef51513bea
--- /dev/null
+++ b/samples/grids/hierarchical-grid/filtering-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Filtering Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/filtering-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/filtering-style/ReadMe.md b/samples/grids/hierarchical-grid/filtering-style/ReadMe.md
new file mode 100644
index 0000000000..8d43c6833b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/filtering-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Filtering Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/filtering-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/ReadMe.md b/samples/grids/hierarchical-grid/hierarchical-grid-options/ReadMe.md
new file mode 100644
index 0000000000..a28e6b7dd2
--- /dev/null
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/hierarchical-grid-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/ReadMe.md b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/ReadMe.md
new file mode 100644
index 0000000000..7a4c125584
--- /dev/null
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Paging Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/hierarchical-grid-paging-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/layout-display-density/ReadMe.md b/samples/grids/hierarchical-grid/layout-display-density/ReadMe.md
new file mode 100644
index 0000000000..eaaa79302b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/layout-display-density/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Layout Display Density feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/layout-display-density
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-export/ReadMe.md
new file mode 100644
index 0000000000..d4f34eb771
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Export feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-export
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-overview/ReadMe.md
new file mode 100644
index 0000000000..4ccb57577f
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Overview feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-styling/ReadMe.md
new file mode 100644
index 0000000000..0cf6b75486
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-template/ReadMe.md
new file mode 100644
index 0000000000..e9736af368
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Template feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-template
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-adding/ReadMe.md b/samples/grids/hierarchical-grid/row-adding/ReadMe.md
new file mode 100644
index 0000000000..7a7a4bdea2
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-adding/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Adding feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-adding
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-classes/ReadMe.md b/samples/grids/hierarchical-grid/row-classes/ReadMe.md
new file mode 100644
index 0000000000..76cf9cbef8
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-classes/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Classes feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-classes
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md b/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md
index 3f40b70942..cb15e7276e 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md
+++ b/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of Overview feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of Row Drag Base feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
@@ -12,10 +12,10 @@ This folder contains implementation of Web Components application with example o
-
+
-
+
@@ -33,7 +33,7 @@ To set up this project locally, execute these commands:
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
git checkout master
cd ./igniteui-wc-examples
-cd ./samples/grids/hierarchical-grid/overview
+cd ./samples/grids/hierarchical-grid/row-drag-base
```
open above folder in VS Code or type:
diff --git a/samples/grids/hierarchical-grid/row-editing-options/ReadMe.md b/samples/grids/hierarchical-grid/row-editing-options/ReadMe.md
new file mode 100644
index 0000000000..4659c5bd45
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-editing-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Editing Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-editing-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-editing-style/ReadMe.md b/samples/grids/hierarchical-grid/row-editing-style/ReadMe.md
new file mode 100644
index 0000000000..747c63b662
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-editing-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Editing Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-editing-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/ReadMe.md b/samples/grids/hierarchical-grid/row-pinning-extra-column/ReadMe.md
new file mode 100644
index 0000000000..2ca3ccef25
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Pinning Extra Column feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-pinning-extra-column
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/ReadMe.md b/samples/grids/hierarchical-grid/row-pinning-options/ReadMe.md
new file mode 100644
index 0000000000..70f34e3cc6
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-pinning-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Pinning Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-pinning-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/ReadMe.md b/samples/grids/hierarchical-grid/row-pinning-style/ReadMe.md
new file mode 100644
index 0000000000..ab0be79bea
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-pinning-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Pinning Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-pinning-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-reorder/ReadMe.md b/samples/grids/hierarchical-grid/row-reorder/ReadMe.md
new file mode 100644
index 0000000000..ff609e303c
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-reorder/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Reorder feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-reorder
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/ReadMe.md b/samples/grids/hierarchical-grid/row-selection-mode/ReadMe.md
new file mode 100644
index 0000000000..ed28fb8016
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-selection-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Selection Mode feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-selection-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/ReadMe.md b/samples/grids/hierarchical-grid/row-selection-template-numbers/ReadMe.md
new file mode 100644
index 0000000000..5b722c1eed
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Selection Template Numbers feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-selection-template-numbers
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-styles/ReadMe.md b/samples/grids/hierarchical-grid/row-styles/ReadMe.md
new file mode 100644
index 0000000000..0efbf79543
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-sample-1/ReadMe.md
new file mode 100644
index 0000000000..7e31dbacb0
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Sample1 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-sample-1
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-sample-2/ReadMe.md
new file mode 100644
index 0000000000..e9726b5fc9
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Sample2 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-sample-2
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-sample-3/ReadMe.md
new file mode 100644
index 0000000000..1a3a61e20b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Sample3 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-sample-3
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-style/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-style/ReadMe.md
new file mode 100644
index 0000000000..fb2a50df99
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/form-integration/fancy/.prettierrc b/samples/inputs/form-integration/fancy/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/form-integration/fancy/ReadMe.md b/samples/inputs/form-integration/fancy/ReadMe.md
new file mode 100644
index 0000000000..009075326b
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Fancy feature using [Form Integration](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/inputs/form-integration/fancy
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/form-integration/fancy/index.html b/samples/inputs/form-integration/fancy/index.html
new file mode 100644
index 0000000000..9862ae2f19
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/index.html
@@ -0,0 +1,119 @@
+
+
+
+ Form Integration
+
+
+
+
+
+
+
+
+
+
+ ('[name="event-public"]')!;
+ switchControl.addEventListener("igcChange", () => {
+ switchControl.textContent = switchControl.checked ? "Public" : "Private";
+ });
+}
+
+function setRadio() {
+ const group = document.querySelector(IgcRadioGroupComponent.tagName)!;
+ const radios = document.querySelectorAll('[name="category"]');
+
+ group.addEventListener("igcChange", (e) => {
+ for (const radio of radios) {
+ radio.classList.toggle("categories-selected", radio === e.target);
+ }
+ });
+}
+
+function setTimeEditor() {
+ document.querySelector(IgcDateTimeInputComponent.tagName)!.spinDelta = { minutes: 5 };
+}
+
+function setSpecialGuests() {
+ const container = document.querySelector("#special-guests")!;
+ const input = document.querySelector('[name="event-number-of-special-guests"]')!;
+
+ input.addEventListener("igcChange", () => {
+ const amount = parseInt(input.value, 10);
+ const children = Array.from(container.children);
+ const length = children.length;
+
+ if (amount > length) {
+ for (let i = 0; i < amount - length; i++) {
+ const child = document.createElement(IgcInputComponent.tagName);
+ children.push(child);
+
+ const idx = children.indexOf(child) + 1;
+
+ child.label = `Name of special guest #${idx}`;
+ child.name = `special-guest-${idx}`;
+ }
+ container.replaceChildren(...children);
+ } else {
+ container.replaceChildren(...children.slice(0, amount));
+ }
+ });
+}
+
+function setVenueAndLocation() {
+ function createItem(props: unknown) {
+ const item = document.createElement(IgcSelectItemComponent.tagName);
+ Object.assign(item, props);
+ return item;
+ }
+
+ function mapVenues(location: "New York" | "Sofia" | "Tokyo") {
+ const mapped = venues[location];
+ venue.replaceChildren(...mapped.map((value) => createItem({ value, textContent: value })));
+ }
+
+ const location = document.querySelector('[name="event-location"]')!;
+ const venue = document.querySelector('[name="event-venue"]')!;
+
+ location.replaceChildren(...cities.map((city) => createItem({ value: city, textContent: city })));
+
+ location.addEventListener("igcChange", () => {
+ venue.value = "";
+ mapVenues(location.value as any);
+ });
+
+ mapVenues(location.value as any);
+}
+
+function setForm() {
+ const form = document.querySelector("form")!;
+
+ form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ });
+}
+
+export class FancyForm {
+ constructor() {
+ registerCategoryIcons();
+ setBudgetFormatter();
+ setSwitch();
+ setRadio();
+ setSpecialGuests();
+ setTimeEditor();
+ setVenueAndLocation();
+ setForm();
+ }
+}
+
+new FancyForm();
diff --git a/samples/inputs/form-integration/fancy/tsconfig.json b/samples/inputs/form-integration/fancy/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/samples/inputs/form-integration/fancy/webpack.config.js b/samples/inputs/form-integration/fancy/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+ const nodeEnv = process.env.NODE_ENV || 'development';
+ const isProd = nodeEnv === 'production';
+ const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+ console.log(">> webpack nodeEnv=" + nodeEnv);
+ console.log(">> webpack isProd=" + isProd);
+ console.log(">> webpack isLegacy=" + isLegacy);
+ const presets = [
+ ["@babel/preset-env", {
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "targets": {
+ "browsers": isLegacy ? ["defaults"] : [
+ "last 2 Chrome versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 2 Firefox versions",
+ "last 2 Edge versions"]
+ }
+ }],
+ "@babel/preset-typescript"
+ ];
+
+ return {
+ entry: isLegacy ? [
+ path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+ path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+ path.resolve(__dirname, 'src')
+ ] : path.resolve(__dirname, 'src'),
+ devtool: isProd ? false : 'source-map',
+ output: {
+ filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+ globalObject: 'this',
+ path: path.resolve(__dirname, 'dist'),
+ },
+
+ resolve: {
+ mainFields: ['esm2015', 'module', 'main'],
+ extensions: ['.ts', '.js', '.json'],
+ plugins: [new TsconfigPathsPlugin({
+ configFile: './tsconfig.json',
+ extensions: ['.ts', '.js'],
+ mainFields: ['esm2015', 'module', 'main']
+ })]
+ },
+
+ module: {
+ rules: [
+ { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+ { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+ { test: /\.xml$/, use: ['xml-loader'] },
+ { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+ {
+ test: /worker\.(ts|js)$/,
+ use: [
+ { loader: 'worker-loader' },
+ {
+ loader: 'babel-loader', options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ },
+ exclude:
+ function (modulePath) {
+ return /node_modules/.test(modulePath) &&
+ !/igniteui-webcomponents/.test(modulePath) &&
+ !/lit-html/.test(modulePath);
+ }
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+ }),
+ new HtmlWebpackPlugin({
+ title: 'for-cs',
+ template: 'index.html'
+ }),
+ new ForkTsCheckerWebpackPlugin()
+ ]
+ };
+};
diff --git a/samples/inputs/form-integration/overview/.prettierrc b/samples/inputs/form-integration/overview/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/form-integration/overview/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/form-integration/overview/ReadMe.md b/samples/inputs/form-integration/overview/ReadMe.md
new file mode 100644
index 0000000000..1012feb35c
--- /dev/null
+++ b/samples/inputs/form-integration/overview/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Overview feature using [Form Integration](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/inputs/form-integration/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/form-integration/overview/index.html b/samples/inputs/form-integration/overview/index.html
new file mode 100644
index 0000000000..5e4f21cd71
--- /dev/null
+++ b/samples/inputs/form-integration/overview/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Form Integration
+
+
+
+
+
+
+
+
+
+
+ ("[name='state']")!.data = ["Not in the USA", ...states];
+}
+
+function onSubmit() {
+ const form = document.querySelector("form")!;
+ form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ document.querySelector(IgcSnackbarComponent.tagName)?.show();
+
+ for (const [name, value] of new FormData(form).entries()) {
+ console.log(`${name}: ${value}`);
+ }
+ });
+}
+
+export class FormOverview {
+ constructor() {
+ populateSelect("[name='business-role']", businessRoles);
+ populateSelect("[name='title-level']", titleLevels);
+ populateCombo();
+ onSubmit();
+ }
+}
+
+new FormOverview();
diff --git a/samples/inputs/form-integration/overview/tsconfig.json b/samples/inputs/form-integration/overview/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/inputs/form-integration/overview/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/samples/inputs/form-integration/overview/webpack.config.js b/samples/inputs/form-integration/overview/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/inputs/form-integration/overview/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+ const nodeEnv = process.env.NODE_ENV || 'development';
+ const isProd = nodeEnv === 'production';
+ const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+ console.log(">> webpack nodeEnv=" + nodeEnv);
+ console.log(">> webpack isProd=" + isProd);
+ console.log(">> webpack isLegacy=" + isLegacy);
+ const presets = [
+ ["@babel/preset-env", {
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "targets": {
+ "browsers": isLegacy ? ["defaults"] : [
+ "last 2 Chrome versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 2 Firefox versions",
+ "last 2 Edge versions"]
+ }
+ }],
+ "@babel/preset-typescript"
+ ];
+
+ return {
+ entry: isLegacy ? [
+ path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+ path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+ path.resolve(__dirname, 'src')
+ ] : path.resolve(__dirname, 'src'),
+ devtool: isProd ? false : 'source-map',
+ output: {
+ filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+ globalObject: 'this',
+ path: path.resolve(__dirname, 'dist'),
+ },
+
+ resolve: {
+ mainFields: ['esm2015', 'module', 'main'],
+ extensions: ['.ts', '.js', '.json'],
+ plugins: [new TsconfigPathsPlugin({
+ configFile: './tsconfig.json',
+ extensions: ['.ts', '.js'],
+ mainFields: ['esm2015', 'module', 'main']
+ })]
+ },
+
+ module: {
+ rules: [
+ { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+ { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+ { test: /\.xml$/, use: ['xml-loader'] },
+ { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+ {
+ test: /worker\.(ts|js)$/,
+ use: [
+ { loader: 'worker-loader' },
+ {
+ loader: 'babel-loader', options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ },
+ exclude:
+ function (modulePath) {
+ return /node_modules/.test(modulePath) &&
+ !/igniteui-webcomponents/.test(modulePath) &&
+ !/lit-html/.test(modulePath);
+ }
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+ }),
+ new HtmlWebpackPlugin({
+ title: 'for-cs',
+ template: 'index.html'
+ }),
+ new ForkTsCheckerWebpackPlugin()
+ ]
+ };
+};
diff --git a/tsconfig.json b/tsconfig.json
index d1592bc61a..c464dc1e36 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"resolveJsonModule": true,
"moduleResolution": "node",
"declaration": true,
- "target": "es5",
+ "target": "ES2015",
"module": "esNext",
"sourceMap": true,
"experimentalDecorators": true,
@@ -15,23 +15,74 @@
"removeComments": true,
"baseUrl": ".",
"paths": {
- "igniteui-dockmanager": ["node_modules/igniteui-dockmanager", "node_modules/@infragistics/igniteui-dockmanager"],
- "igniteui-dockmanager/*": ["node_modules/igniteui-dockmanager/*", "node_modules/@infragistics/igniteui-dockmanager/*"],
- "igniteui-webcomponents-core": ["node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core"],
- "igniteui-webcomponents-charts": ["node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts"],
- "igniteui-webcomponents-gauges": ["node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges"],
- "igniteui-webcomponents-datasources": ["node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources"],
- "igniteui-webcomponents-excel": ["node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel"],
- "igniteui-webcomponents-inputs": ["node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs"],
- "igniteui-webcomponents-grids": ["node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids"],
- "igniteui-webcomponents-maps": ["node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps"],
- "igniteui-webcomponents-spreadsheet": ["node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet"],
- "igniteui-webcomponents-spreadsheet-chart-adapter": ["node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter"],
- "igniteui-webcomponents-grids/*": ["node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*"],
- "igniteui-webcomponents-grids/grids": ["node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids"],
- "igniteui-webcomponents-grids/grids/*": ["node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*"],
- "igniteui-webcomponents-grids/grids/combined": ["node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined"],
- "igniteui-webcomponents-layouts": ["node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts"],
+ "igniteui-dockmanager": [
+ "node_modules/igniteui-dockmanager",
+ "node_modules/@infragistics/igniteui-dockmanager"
+ ],
+ "igniteui-dockmanager/*": [
+ "node_modules/igniteui-dockmanager/*",
+ "node_modules/@infragistics/igniteui-dockmanager/*"
+ ],
+ "igniteui-webcomponents-core": [
+ "node_modules/igniteui-webcomponents-core",
+ "node_modules/@infragistics/igniteui-webcomponents-core"
+ ],
+ "igniteui-webcomponents-charts": [
+ "node_modules/igniteui-webcomponents-charts",
+ "node_modules/@infragistics/igniteui-webcomponents-charts"
+ ],
+ "igniteui-webcomponents-gauges": [
+ "node_modules/igniteui-webcomponents-gauges",
+ "node_modules/@infragistics/igniteui-webcomponents-gauges"
+ ],
+ "igniteui-webcomponents-datasources": [
+ "node_modules/igniteui-webcomponents-datasources",
+ "node_modules/@infragistics/igniteui-webcomponents-datasources"
+ ],
+ "igniteui-webcomponents-excel": [
+ "node_modules/igniteui-webcomponents-excel",
+ "node_modules/@infragistics/igniteui-webcomponents-excel"
+ ],
+ "igniteui-webcomponents-inputs": [
+ "node_modules/igniteui-webcomponents-inputs",
+ "node_modules/@infragistics/igniteui-webcomponents-inputs"
+ ],
+ "igniteui-webcomponents-grids": [
+ "node_modules/igniteui-webcomponents-grids",
+ "node_modules/@infragistics/igniteui-webcomponents-grids"
+ ],
+ "igniteui-webcomponents-maps": [
+ "node_modules/igniteui-webcomponents-maps",
+ "node_modules/@infragistics/igniteui-webcomponents-maps"
+ ],
+ "igniteui-webcomponents-spreadsheet": [
+ "node_modules/igniteui-webcomponents-spreadsheet",
+ "node_modules/@infragistics/igniteui-webcomponents-spreadsheet"
+ ],
+ "igniteui-webcomponents-spreadsheet-chart-adapter": [
+ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter",
+ "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter"
+ ],
+ "igniteui-webcomponents-grids/*": [
+ "node_modules/igniteui-webcomponents-grids/*",
+ "node_modules/@infragistics/igniteui-webcomponents-grids/*"
+ ],
+ "igniteui-webcomponents-grids/grids": [
+ "node_modules/igniteui-webcomponents-grids/grids",
+ "node_modules/@infragistics/igniteui-webcomponents-grids/grids"
+ ],
+ "igniteui-webcomponents-grids/grids/*": [
+ "node_modules/igniteui-webcomponents-grids/grids/*",
+ "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*"
+ ],
+ "igniteui-webcomponents-grids/grids/combined": [
+ "node_modules/igniteui-webcomponents-grids/grids/combined",
+ "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined"
+ ],
+ "igniteui-webcomponents-layouts": [
+ "node_modules/igniteui-webcomponents-layouts",
+ "node_modules/@infragistics/igniteui-webcomponents-layouts"
+ ]
}
},
"exclude": [
@@ -55,5 +106,5 @@
"browser/src/utilities/*.ts",
"samples"
]
- },
+ }
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/category-chart/highlighting-behavior
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/category-chart/highlighting-mode/ReadMe.md b/samples/charts/category-chart/highlighting-mode/ReadMe.md
new file mode 100644
index 0000000000..d281b8e887
--- /dev/null
+++ b/samples/charts/category-chart/highlighting-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Highlighting Mode feature using [Category Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/category-chart/highlighting-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/category-chart/legend-highlighting/ReadMe.md b/samples/charts/category-chart/legend-highlighting/ReadMe.md
new file mode 100644
index 0000000000..aa76ad2c7b
--- /dev/null
+++ b/samples/charts/category-chart/legend-highlighting/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Legend Highlighting feature using [Category Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/category-chart/legend-highlighting
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/ReadMe.md b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/ReadMe.md
new file mode 100644
index 0000000000..4ebbdcde42
--- /dev/null
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Scatter Bubble Chart Fill Scale feature using [Data Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/data-chart/scatter-bubble-chart-fill-scale
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/tree-map/highlighting/ReadMe.md b/samples/charts/tree-map/highlighting/ReadMe.md
new file mode 100644
index 0000000000..c72dcd3b2c
--- /dev/null
+++ b/samples/charts/tree-map/highlighting/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Highlighting feature using [Tree Map](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/tree-map/highlighting
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/gauges/bullet-graph/highlight-needle/ReadMe.md b/samples/gauges/bullet-graph/highlight-needle/ReadMe.md
index 7a636ef7c0..47b7487fd8 100644
--- a/samples/gauges/bullet-graph/highlight-needle/ReadMe.md
+++ b/samples/gauges/bullet-graph/highlight-needle/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of highlight-needle feature using [Bullet Graph](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of Highlight Needle feature using [Bullet Graph](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
diff --git a/samples/gauges/linear-gauge/highlight-needle/ReadMe.md b/samples/gauges/linear-gauge/highlight-needle/ReadMe.md
index 30d706a9f0..dbddec0f75 100644
--- a/samples/gauges/linear-gauge/highlight-needle/ReadMe.md
+++ b/samples/gauges/linear-gauge/highlight-needle/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of highlight-needle feature using [Linear Gauge](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of Highlight Needle feature using [Linear Gauge](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
diff --git a/samples/grids/hierarchical-grid/action-strip/ReadMe.md b/samples/grids/hierarchical-grid/action-strip/ReadMe.md
new file mode 100644
index 0000000000..a92af205a5
--- /dev/null
+++ b/samples/grids/hierarchical-grid/action-strip/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Action Strip feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/action-strip
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/ReadMe.md b/samples/grids/hierarchical-grid/advanced-filtering-options/ReadMe.md
new file mode 100644
index 0000000000..46630b9385
--- /dev/null
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Advanced Filtering Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/advanced-filtering-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/ReadMe.md b/samples/grids/hierarchical-grid/advanced-filtering-style/ReadMe.md
new file mode 100644
index 0000000000..2ba04f2b6b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Advanced Filtering Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/advanced-filtering-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/ReadMe.md b/samples/grids/hierarchical-grid/cell-editing-sample/ReadMe.md
new file mode 100644
index 0000000000..6ffe37ddd8
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Editing Sample feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-editing-sample
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/ReadMe.md b/samples/grids/hierarchical-grid/cell-editing-styling/ReadMe.md
new file mode 100644
index 0000000000..c0923c020e
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Editing Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-editing-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-mode/ReadMe.md
new file mode 100644
index 0000000000..1d8b4b1695
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Selection Mode feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-selection-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-overview/ReadMe.md
new file mode 100644
index 0000000000..c48cd804eb
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Selection Overview feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-selection-overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-styling/ReadMe.md
new file mode 100644
index 0000000000..1890f5475c
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Cell Selection Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/cell-selection-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/ReadMe.md b/samples/grids/hierarchical-grid/column-collapsible-groups/ReadMe.md
new file mode 100644
index 0000000000..ec7028e355
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Collapsible Groups feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-collapsible-groups
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/ReadMe.md b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/ReadMe.md
new file mode 100644
index 0000000000..72fc4da13b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Hiding Toolbar Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-hiding-toolbar-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/ReadMe.md b/samples/grids/hierarchical-grid/column-hiding-toolbar/ReadMe.md
new file mode 100644
index 0000000000..b5d076ea78
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Hiding Toolbar feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-hiding-toolbar
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-moving-options/ReadMe.md b/samples/grids/hierarchical-grid/column-moving-options/ReadMe.md
new file mode 100644
index 0000000000..f4a21573f8
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-moving-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Moving Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-moving-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/ReadMe.md b/samples/grids/hierarchical-grid/column-moving-styles/ReadMe.md
new file mode 100644
index 0000000000..bea198a732
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-moving-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Moving Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-moving-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning-options/ReadMe.md
new file mode 100644
index 0000000000..1904398d54
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning-right-side/ReadMe.md
new file mode 100644
index 0000000000..463d3cacc3
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning Right Side feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning-right-side
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning-styles/ReadMe.md
new file mode 100644
index 0000000000..256d0675c6
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning/ReadMe.md b/samples/grids/hierarchical-grid/column-pinning/ReadMe.md
new file mode 100644
index 0000000000..e5b4eb1092
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Pinning feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-pinning
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-selection-group/ReadMe.md b/samples/grids/hierarchical-grid/column-selection-group/ReadMe.md
new file mode 100644
index 0000000000..53742f24bf
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-selection-group/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Selection Group feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-selection-group
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/ReadMe.md b/samples/grids/hierarchical-grid/column-selection-mode/ReadMe.md
new file mode 100644
index 0000000000..6c201c944b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-selection-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Selection Mode feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-selection-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/ReadMe.md b/samples/grids/hierarchical-grid/column-selection-styles/ReadMe.md
new file mode 100644
index 0000000000..90029d96db
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-selection-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Selection Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-selection-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/ReadMe.md b/samples/grids/hierarchical-grid/column-sorting-indicators/ReadMe.md
new file mode 100644
index 0000000000..ddb89c72da
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Sorting Indicators feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-sorting-indicators
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/ReadMe.md b/samples/grids/hierarchical-grid/column-sorting-options/ReadMe.md
new file mode 100644
index 0000000000..eab605a00f
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-sorting-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Sorting Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-sorting-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/ReadMe.md b/samples/grids/hierarchical-grid/column-sorting-style/ReadMe.md
new file mode 100644
index 0000000000..5a30867e21
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-sorting-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Sorting Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/column-sorting-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/ReadMe.md b/samples/grids/hierarchical-grid/conditional-cell-style-1/ReadMe.md
new file mode 100644
index 0000000000..c466661371
--- /dev/null
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Conditional Cell Style1 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/conditional-cell-style-1
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/ReadMe.md b/samples/grids/hierarchical-grid/conditional-cell-style-2/ReadMe.md
new file mode 100644
index 0000000000..f4bd16338a
--- /dev/null
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Conditional Cell Style2 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/conditional-cell-style-2
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/ReadMe.md b/samples/grids/hierarchical-grid/conditional-row-selectors/ReadMe.md
new file mode 100644
index 0000000000..262a7af991
--- /dev/null
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Conditional Row Selectors feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/conditional-row-selectors
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/custom-filtering/ReadMe.md b/samples/grids/hierarchical-grid/custom-filtering/ReadMe.md
new file mode 100644
index 0000000000..0efea94908
--- /dev/null
+++ b/samples/grids/hierarchical-grid/custom-filtering/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Custom Filtering feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/custom-filtering
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-formatter/ReadMe.md
new file mode 100644
index 0000000000..7ab9c938f2
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Formatter feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-formatter
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-options-styling/ReadMe.md
new file mode 100644
index 0000000000..09f518fde4
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Options Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-options-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-options/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-options/ReadMe.md
new file mode 100644
index 0000000000..fe97043633
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/data-summary-template/ReadMe.md b/samples/grids/hierarchical-grid/data-summary-template/ReadMe.md
new file mode 100644
index 0000000000..d032b0ceef
--- /dev/null
+++ b/samples/grids/hierarchical-grid/data-summary-template/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Summary Template feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/data-summary-template
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/editing-columns/ReadMe.md b/samples/grids/hierarchical-grid/editing-columns/ReadMe.md
new file mode 100644
index 0000000000..d5c793632a
--- /dev/null
+++ b/samples/grids/hierarchical-grid/editing-columns/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Editing Columns feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/editing-columns
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/editing-events/ReadMe.md b/samples/grids/hierarchical-grid/editing-events/ReadMe.md
new file mode 100644
index 0000000000..07f66dbd36
--- /dev/null
+++ b/samples/grids/hierarchical-grid/editing-events/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Editing Events feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/editing-events
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/ReadMe.md b/samples/grids/hierarchical-grid/editing-lifecycle/ReadMe.md
new file mode 100644
index 0000000000..f70e6ff290
--- /dev/null
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Editing Lifecycle feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/editing-lifecycle
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-exporting/ReadMe.md b/samples/grids/hierarchical-grid/excel-exporting/ReadMe.md
new file mode 100644
index 0000000000..73b607837f
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-exporting/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Exporting feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-exporting
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/ReadMe.md
new file mode 100644
index 0000000000..807b444a17
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Sample1 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-sample-1
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/ReadMe.md
new file mode 100644
index 0000000000..75602661ea
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Sample2 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-sample-2
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/ReadMe.md
new file mode 100644
index 0000000000..6aa71d5b85
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Sample3 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-sample-3
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/ReadMe.md b/samples/grids/hierarchical-grid/excel-style-filtering-style/ReadMe.md
new file mode 100644
index 0000000000..add01f8a86
--- /dev/null
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Excel Style Filtering Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/excel-style-filtering-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/filtering-options/ReadMe.md b/samples/grids/hierarchical-grid/filtering-options/ReadMe.md
new file mode 100644
index 0000000000..ef51513bea
--- /dev/null
+++ b/samples/grids/hierarchical-grid/filtering-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Filtering Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/filtering-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/filtering-style/ReadMe.md b/samples/grids/hierarchical-grid/filtering-style/ReadMe.md
new file mode 100644
index 0000000000..8d43c6833b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/filtering-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Filtering Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/filtering-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/ReadMe.md b/samples/grids/hierarchical-grid/hierarchical-grid-options/ReadMe.md
new file mode 100644
index 0000000000..a28e6b7dd2
--- /dev/null
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/hierarchical-grid-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/ReadMe.md b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/ReadMe.md
new file mode 100644
index 0000000000..7a4c125584
--- /dev/null
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Paging Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/hierarchical-grid-paging-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/layout-display-density/ReadMe.md b/samples/grids/hierarchical-grid/layout-display-density/ReadMe.md
new file mode 100644
index 0000000000..eaaa79302b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/layout-display-density/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Layout Display Density feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/layout-display-density
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-export/ReadMe.md
new file mode 100644
index 0000000000..d4f34eb771
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Export feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-export
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-overview/ReadMe.md
new file mode 100644
index 0000000000..4ccb57577f
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Overview feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-styling/ReadMe.md
new file mode 100644
index 0000000000..0cf6b75486
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Styling feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/ReadMe.md b/samples/grids/hierarchical-grid/multi-column-headers-template/ReadMe.md
new file mode 100644
index 0000000000..e9736af368
--- /dev/null
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Multi Column Headers Template feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/multi-column-headers-template
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-adding/ReadMe.md b/samples/grids/hierarchical-grid/row-adding/ReadMe.md
new file mode 100644
index 0000000000..7a7a4bdea2
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-adding/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Adding feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-adding
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-classes/ReadMe.md b/samples/grids/hierarchical-grid/row-classes/ReadMe.md
new file mode 100644
index 0000000000..76cf9cbef8
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-classes/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Classes feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-classes
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md b/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md
index 3f40b70942..cb15e7276e 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md
+++ b/samples/grids/hierarchical-grid/row-drag-base/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of Overview feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of Row Drag Base feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
@@ -12,10 +12,10 @@ This folder contains implementation of Web Components application with example o
-
+
-
+
@@ -33,7 +33,7 @@ To set up this project locally, execute these commands:
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
git checkout master
cd ./igniteui-wc-examples
-cd ./samples/grids/hierarchical-grid/overview
+cd ./samples/grids/hierarchical-grid/row-drag-base
```
open above folder in VS Code or type:
diff --git a/samples/grids/hierarchical-grid/row-editing-options/ReadMe.md b/samples/grids/hierarchical-grid/row-editing-options/ReadMe.md
new file mode 100644
index 0000000000..4659c5bd45
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-editing-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Editing Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-editing-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-editing-style/ReadMe.md b/samples/grids/hierarchical-grid/row-editing-style/ReadMe.md
new file mode 100644
index 0000000000..747c63b662
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-editing-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Editing Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-editing-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/ReadMe.md b/samples/grids/hierarchical-grid/row-pinning-extra-column/ReadMe.md
new file mode 100644
index 0000000000..2ca3ccef25
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Pinning Extra Column feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-pinning-extra-column
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/ReadMe.md b/samples/grids/hierarchical-grid/row-pinning-options/ReadMe.md
new file mode 100644
index 0000000000..70f34e3cc6
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-pinning-options/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Pinning Options feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-pinning-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/ReadMe.md b/samples/grids/hierarchical-grid/row-pinning-style/ReadMe.md
new file mode 100644
index 0000000000..ab0be79bea
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-pinning-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Pinning Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-pinning-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-reorder/ReadMe.md b/samples/grids/hierarchical-grid/row-reorder/ReadMe.md
new file mode 100644
index 0000000000..ff609e303c
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-reorder/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Reorder feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-reorder
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/ReadMe.md b/samples/grids/hierarchical-grid/row-selection-mode/ReadMe.md
new file mode 100644
index 0000000000..ed28fb8016
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-selection-mode/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Selection Mode feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-selection-mode
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/ReadMe.md b/samples/grids/hierarchical-grid/row-selection-template-numbers/ReadMe.md
new file mode 100644
index 0000000000..5b722c1eed
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Selection Template Numbers feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-selection-template-numbers
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/row-styles/ReadMe.md b/samples/grids/hierarchical-grid/row-styles/ReadMe.md
new file mode 100644
index 0000000000..0efbf79543
--- /dev/null
+++ b/samples/grids/hierarchical-grid/row-styles/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Row Styles feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/row-styles
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-sample-1/ReadMe.md
new file mode 100644
index 0000000000..7e31dbacb0
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Sample1 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-sample-1
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-sample-2/ReadMe.md
new file mode 100644
index 0000000000..e9726b5fc9
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Sample2 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-sample-2
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-sample-3/ReadMe.md
new file mode 100644
index 0000000000..1a3a61e20b
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Sample3 feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-sample-3
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/toolbar-style/ReadMe.md b/samples/grids/hierarchical-grid/toolbar-style/ReadMe.md
new file mode 100644
index 0000000000..fb2a50df99
--- /dev/null
+++ b/samples/grids/hierarchical-grid/toolbar-style/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Toolbar Style feature using [Hierarchical Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/hierarchical-grid/toolbar-style
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/form-integration/fancy/.prettierrc b/samples/inputs/form-integration/fancy/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/inputs/form-integration/fancy/ReadMe.md b/samples/inputs/form-integration/fancy/ReadMe.md
new file mode 100644
index 0000000000..009075326b
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Fancy feature using [Form Integration](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/inputs/form-integration/fancy
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/form-integration/fancy/index.html b/samples/inputs/form-integration/fancy/index.html
new file mode 100644
index 0000000000..9862ae2f19
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/index.html
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+ <% if (false) { %>
+
+ <% } %>
+
+
diff --git a/samples/inputs/form-integration/fancy/package.json b/samples/inputs/form-integration/fancy/package.json
new file mode 100644
index 0000000000..c81906fd37
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "wc-form-fancy",
+ "version": "1.0.0",
+ "description": "This project provides example of using IgniteUI for Web Components in standard forms",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "npm run build:prod",
+ "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start": "npm run serve:dev",
+ "build:legacy": "npm run build:prod:legacy",
+ "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start:legacy": "npm run serve:dev:legacy"
+ },
+ "author": "Infragistics",
+ "dependencies": {
+ "@webcomponents/custom-elements": "^1.4.1",
+ "@webcomponents/template": "^1.4.2",
+ "babel-runtime": "^6.26.0",
+ "core-js": "^3.6.5",
+ "igniteui-webcomponents": "^4.8.0",
+ "lit": "^3.1.2",
+ "lit-html": "^3.1.2",
+ "tslib": "^2.6.2"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.8.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.10.0",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-typescript": "^7.8.3",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^1.0.0",
+ "csv-loader": "^3.0.2",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "parcel-bundler": "^1.6.1",
+ "source-map": "^0.7.3",
+ "style-loader": "^0.22.1",
+ "tsconfig-paths-webpack-plugin": "^4.0.0",
+ "typescript": "^4.4.4",
+ "webpack": "^5.74.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.11.1",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ },
+ "license": "",
+ "homepage": "."
+}
diff --git a/samples/inputs/form-integration/fancy/sandbox.config.json b/samples/inputs/form-integration/fancy/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "parcel"
+}
+
\ No newline at end of file
diff --git a/samples/inputs/form-integration/fancy/src/data.ts b/samples/inputs/form-integration/fancy/src/data.ts
new file mode 100644
index 0000000000..3edf9adcd4
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/src/data.ts
@@ -0,0 +1,22 @@
+import { registerIcon } from "igniteui-webcomponents";
+
+const icons = {
+ music: `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/music_note/default/24px.svg`,
+ food: `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/brunch_dining/default/24px.svg`,
+ arts: `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/palette/default/24px.svg`,
+ party: `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/nightlife/default/24px.svg`,
+ sport: `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/sports_and_outdoors/default/24px.svg`,
+ education: `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/school/default/24px.svg`
+};
+
+export async function registerCategoryIcons() {
+ await Promise.all(Object.entries(icons).flatMap(([name, url]) => registerIcon(name, url, "categories")));
+}
+
+export const cities = ["New York", "Sofia", "Tokyo"];
+
+export const venues = {
+ "New York": ["The Glasshouse", "The Pool", "Nebula", "74Wythe", "JACX&Co", "SPACE Events", "620 Loft & Garden"],
+ Sofia: ["Inter Expo Center", "National Palace of Culture", "Sofia Event Center", "Radisson Blu Grand Hotel", "Hilton", "Hotel Marinela"],
+ Tokyo: ["Tokyo Dome", "Kokugikan Sumo Stadium", "Miraikan", "Tachikawa Stage Garden", "Hotel Gajoen", "Meiji Kinenkan"]
+};
diff --git a/samples/inputs/form-integration/fancy/src/index.css b/samples/inputs/form-integration/fancy/src/index.css
new file mode 100644
index 0000000000..c2b9b9217b
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/src/index.css
@@ -0,0 +1,60 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+:root {
+ --ig-primary-h: 270deg;
+ --ig-primary-s: 50%;
+ --ig-primary-l: 40%;
+ --ig-font-family: sans-serif;
+ --ig-size: var(--ig-size-medium);
+}
+
+fieldset {
+ border: none;
+}
+
+igc-step::part(content) {
+ padding: 1rem;
+ min-height: 90dvh;
+ min-width: 90dvw;
+}
+
+.categories-group {
+ display: flex;
+ justify-content: space-between;
+}
+
+.categories-selected::part(label) {
+ color: #fff;
+ border: 1px solid #fff;
+ background-color: rebeccapurple;
+}
+
+.categories::part(control) {
+ display: none;
+}
+
+.categories::part(label) {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: center;
+ height: 8rem;
+ width: 8rem;
+ padding: 2rem;
+ border-radius: 50%;
+ text-align: center;
+ border: 1px solid rebeccapurple;
+ transition: all 0.2s ease-in;
+}
+
+.categories::part(label):hover {
+ color: #fff;
+ border: 1px solid #fff;
+ background-color: rebeccapurple;
+}
+
+.categories:focus-within::part(label) {
+ color: #fff;
+ border: 1px solid #fff;
+ background-color: rebeccapurple;
+}
diff --git a/samples/inputs/form-integration/fancy/src/index.ts b/samples/inputs/form-integration/fancy/src/index.ts
new file mode 100644
index 0000000000..3cb3327cb7
--- /dev/null
+++ b/samples/inputs/form-integration/fancy/src/index.ts
@@ -0,0 +1,126 @@
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import {
+ defineComponents,
+ IgcRadioGroupComponent,
+ IgcIconComponent,
+ IgcStepperComponent,
+ IgcSelectComponent,
+ IgcSliderComponent,
+ IgcSwitchComponent,
+ IgcRadioComponent,
+ IgcTextareaComponent,
+ IgcInputComponent,
+ IgcCheckboxComponent,
+ IgcButtonComponent,
+ IgcDateTimeInputComponent,
+ IgcSelectItemComponent
+} from "igniteui-webcomponents";
+import "./index.css";
+import { cities, registerCategoryIcons, venues } from "./data";
+
+defineComponents(IgcRadioGroupComponent, IgcDateTimeInputComponent, IgcButtonComponent, IgcCheckboxComponent, IgcIconComponent, IgcStepperComponent, IgcSelectComponent, IgcSliderComponent, IgcSwitchComponent, IgcTextareaComponent);
+
+function setBudgetFormatter() {
+ const currencyFormat: Intl.NumberFormatOptions = {
+ style: "currency",
+ currency: "USD",
+ minimumFractionDigits: 2
+ };
+ document.querySelector(IgcSliderComponent.tagName)!.valueFormatOptions = currencyFormat;
+}
+
+function setSwitch() {
+ const switchControl = document.querySelector
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/inputs/form-integration/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/form-integration/overview/index.html b/samples/inputs/form-integration/overview/index.html
new file mode 100644
index 0000000000..5e4f21cd71
--- /dev/null
+++ b/samples/inputs/form-integration/overview/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+ <% if (false) { %>
+
+ <% } %>
+
+
diff --git a/samples/inputs/form-integration/overview/package.json b/samples/inputs/form-integration/overview/package.json
new file mode 100644
index 0000000000..93849e965b
--- /dev/null
+++ b/samples/inputs/form-integration/overview/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "wc-form-integration",
+ "version": "1.0.0",
+ "description": "This project provides example of using IgniteUI for Web Components in standard forms",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "npm run build:prod",
+ "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start": "npm run serve:dev",
+ "build:legacy": "npm run build:prod:legacy",
+ "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start:legacy": "npm run serve:dev:legacy"
+ },
+ "author": "Infragistics",
+ "dependencies": {
+ "@webcomponents/custom-elements": "^1.4.1",
+ "@webcomponents/template": "^1.4.2",
+ "babel-runtime": "^6.26.0",
+ "core-js": "^3.6.5",
+ "igniteui-webcomponents": "^4.8.0",
+ "lit": "^3.1.2",
+ "lit-html": "^3.1.2",
+ "tslib": "^2.6.2"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.8.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.10.0",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-typescript": "^7.8.3",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^1.0.0",
+ "csv-loader": "^3.0.2",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "parcel-bundler": "^1.6.1",
+ "source-map": "^0.7.3",
+ "style-loader": "^0.22.1",
+ "tsconfig-paths-webpack-plugin": "^4.0.0",
+ "typescript": "^4.4.4",
+ "webpack": "^5.74.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.11.1",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ },
+ "license": "",
+ "homepage": "."
+}
diff --git a/samples/inputs/form-integration/overview/sandbox.config.json b/samples/inputs/form-integration/overview/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/inputs/form-integration/overview/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "parcel"
+}
+
\ No newline at end of file
diff --git a/samples/inputs/form-integration/overview/src/data.ts b/samples/inputs/form-integration/overview/src/data.ts
new file mode 100644
index 0000000000..0069084352
--- /dev/null
+++ b/samples/inputs/form-integration/overview/src/data.ts
@@ -0,0 +1,6 @@
+export const businessRoles = ["Health & Clinical", "HR & Benefits", "Academia", "Marketing", "Sales", "Product & Engineering", "Other"];
+export const titleLevels = ["Consultant", "Director", "VP", "C-Level", "Manager", "Associate", "Analyst/Specialist", "Other"];
+export const states =
+ `Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware, Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana, Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana, Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina, North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina, South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia, Wisconsin, Wyoming`
+ .split(",")
+ .map((state) => state.trim());
diff --git a/samples/inputs/form-integration/overview/src/index.css b/samples/inputs/form-integration/overview/src/index.css
new file mode 100644
index 0000000000..14afc409f9
--- /dev/null
+++ b/samples/inputs/form-integration/overview/src/index.css
@@ -0,0 +1,10 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.form-input {
+ margin-top: 1em;
+}
+
+.form-notification {
+ z-index: 1;
+}
diff --git a/samples/inputs/form-integration/overview/src/index.ts b/samples/inputs/form-integration/overview/src/index.ts
new file mode 100644
index 0000000000..47f0b3e7ec
--- /dev/null
+++ b/samples/inputs/form-integration/overview/src/index.ts
@@ -0,0 +1,42 @@
+import { defineComponents, IgcInputComponent, IgcSelectComponent, IgcSnackbarComponent, IgcSelectItemComponent, IgcComboComponent, IgcMaskInputComponent, IgcTextareaComponent, IgcCheckboxComponent, IgcButtonComponent } from "igniteui-webcomponents";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+import { businessRoles, states, titleLevels } from "./data";
+
+defineComponents(IgcInputComponent, IgcSelectComponent, IgcComboComponent, IgcSnackbarComponent, IgcTextareaComponent, IgcCheckboxComponent, IgcMaskInputComponent, IgcButtonComponent);
+
+function populateSelect(id: string, data: string[]) {
+ const elements = data.map((value) => {
+ const element = document.createElement(IgcSelectItemComponent.tagName);
+ return Object.assign(element, { value, textContent: value });
+ });
+
+ document.querySelector(id)!.append(...elements);
+}
+
+function populateCombo() {
+ document.querySelector
+
+
+