chore: add more Cypress tests and fix Vue Row Detail

Author: ghiscoding

src/app/examples/grid45.component.html

@@ -84,6 +84,17 @@ <h2>
             Use Inner Grid State/Presets
           </span>
         </label>
+
+        <label class="checkbox-inline control-label ms-2" for="useResizeAutoHeight">
+          <input
+            type="checkbox"
+            id="useResizeAutoHeight"
+            data-test="use-auto-height"
+            [checked]="isUsingAutoHeight"
+            (click)="changeUsingResizerAutoHeight()"
+          />
+          Use <code>autoResize.autoHeight</code>
+        </label>
       </span>
     </div>
   </div>

src/app/examples/grid45.component.ts

@@ -22,6 +22,7 @@ export class Grid45Component implements OnDestroy, OnInit {
   detailViewRowCount = 9;
   showSubTitle = true;
   isUsingInnerGridStatePresets = false;
+  isUsingAutoHeight = false;
   serverWaitDelay = FAKE_SERVER_DELAY;
 
   get rowDetailInstance(): SlickRowDetailView {
@@ -100,7 +101,7 @@ export class Grid45Component implements OnDestroy, OnInit {
     this.gridOptions = {
       autoResize: {
         container: '#demo-container',
-        autoHeight: false, // works with/without autoHeight
+        autoHeight: this.isUsingAutoHeight, // works with/without autoHeight
         bottomPadding: 20,
       },
       autoHeight: false,
@@ -160,6 +161,15 @@ export class Grid45Component implements OnDestroy, OnInit {
     return true;
   }
 
+  changeUsingResizerAutoHeight() {
+    this.isUsingAutoHeight = !this.isUsingAutoHeight;
+    this.angularGrid.slickGrid?.setOptions({
+      autoResize: { ...this.gridOptions.autoResize, autoHeight: this.isUsingAutoHeight },
+    });
+    this.angularGrid.resizerService.resizeGrid();
+    return true;
+  }
+
   closeAllRowDetail() {
     this.rowDetailInstance?.collapseAll();
   }