chore(*): Add scenario to test hgrid as well.

Author: MKirova

projects/igniteui-angular-elements/src/index.html

@@ -287,7 +287,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
   </script>
   <!-- END IgxTreeGridComponent -->
 
-  <igc-hierarchical-grid id="hgrid1" moving="true" allow-filtering="true" filter-mode="excelStyleFilter" display-density="compact">
+  <igc-hierarchical-grid id="hgrid1" primary-key="ProjectId" moving="true" allow-filtering="true" filter-mode="excelStyleFilter" display-density="compact">
     <igc-grid-state id="state2"></igc-grid-state>
     <igc-column field="ProjectId" data-type="number" header="Project Id" sortable="true" selectable="false"></igc-column>
     <igc-column field="Name" data-type="string" header="Name" sortable="true" selectable="false"></igc-column>
@@ -315,7 +315,12 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
         <igc-grid-pinning-actions></igc-grid-pinning-actions>
         <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
     </igc-action-strip>
+    <igc-grid-state id="hgridState"></igc-grid-state>
   </igc-hierarchical-grid>
+  <div class="hgrid1-actions">
+    <button id="saveStateHierarchical">Save state</button>
+    <button id="restoreStateHierarchical">Restore</button>
+  </div>
 
   <!-- IgxPivotGridComponent -->
   <igc-pivot-grid id="pivotgrid1" default-expand-state="true" row-selection="single"></igc-pivot-grid>
@@ -417,9 +422,27 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
     import { html } from "/lit-html.js";
     // jump around vite import analysis with dynamic import url
     const hgridData = (await import(`/assets/${'data'}/projects-hgrid.js`)).default;
+    function saveStateHierarchical() {
+        const stateComponent = document.getElementById('hgridState');
+        const stringData = stateComponent.getStateAsString();
+        window.localStorage.setItem(`hgrid1-state`, stringData);
+    }
+
+    function restoreStateHierarchical() {
+        const stateComponent = document.getElementById('hgridState');
+        const stateData = window.localStorage.getItem(`hgrid1-state`);
+        if (stateData) {
+            const obj = JSON.parse(stateData);
+            stateComponent.applyState(obj);
+        }
+    }
     let hgrid = document.getElementById('hgrid1');
+    hgrid.addEventListener('childrenAttached', () => {
+            restoreStateHierarchical();
+    });
     hgrid.data = hgridData;
-
+    document.getElementById("saveStateHierarchical").addEventListener("click", saveStateHierarchical);
+    document.getElementById("restoreStateHierarchical").addEventListener("click", restoreStateHierarchical);
     let developersRowIsland = document.getElementById('DevelopersRowIsland');
     let virtualMachinesRowIsland = document.getElementById('VirtualMachinesRowIsland');
     virtualMachinesRowIsland.paginatorTemplate = (ctx) => html`