chore(*): Improve samples a bit.

Author: MKirova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1178,6 +1178,7 @@
 
         %grid-row--mrl {
             %igx-grid__hierarchical-expander--header,
+            %igx-grid__hierarchical-expander,
             %igx-grid__header-indentation,
             %igx-grid__row-indentation,
             %grid__cbx-selection {
@@ -1310,6 +1311,7 @@
         }
 
         %grid__cbx-selection,
+        %igx-grid__hierarchical-expander,
         %igx-grid__row-indentation,
         %igx-grid__drag-indicator {
             border-bottom: rem(1px) solid var-get($theme, 'row-border-color');

src/app/grid-cellMerging/grid-cellMerging.component.html

@@ -1,7 +1,7 @@
 <h4 class="sample-title">Grid with cell merge</h4>
 
 <div class="grid__wrapper">
-  <igx-input-group type="search" class="offset">
+  <igx-input-group type="search" class="searchInput">
     <igx-prefix>
       @if (searchText.length === 0) {
         <igx-icon>search</igx-icon>
@@ -45,46 +45,47 @@ <h4 class="sample-title">Grid with cell merge</h4>
 </div>
 <igx-grid [data]="data" width="800px" height="550px" [moving]="true" #grid1
     [cellMergeMode]="'always'" [rowSelection]="'single'">
-    <igx-column field="ProductID" header="Product ID" width="200px">
-        <ng-template igxCell let-cell="cell" let-val>
-            <div>
-                <button igxButton>Test {{cell.row.index}}</button>
-                <!-- @if (cell.row.index % 2 == 0) {
-                <br/>
-                <button igxButton>Test 2</button>
-            } -->
-
-            </div>
-        </ng-template>
+    <igx-column field="OrderID" header="Order ID" [hidden]="true" >
+    </igx-column>
+    <igx-column field="ShipCountry" header="Ship Country" width="200px" [merge]="true" sortable="true">
+    </igx-column>
+    <igx-column field="OrderDate" header="Order Date" width="200px" [dataType]="'date'" sortable="true">
+    </igx-column>
+    <igx-column field="PostalCode" header="Postal Code" width="200px" >
+    </igx-column>
+    <igx-column field="Discontinued" header="Discontinued" width="200px" sortable="true">
+    </igx-column>
+    <igx-column field="ShipName" header="Ship Name" width="250px">
+    </igx-column>
+    <igx-column field="ShipCity" header="Ship City" width="250px">
     </igx-column>
-    <igx-column field="ReorderLevel" width="200px" [merge]="true" editable="true">
+    <igx-column field="ShipperName" header="Shipper Name" width="250px">
     </igx-column>
-    <igx-column required field="ProductName" width="200px" [merge]="true" groupable="true">
+    <igx-column field="Salesperson" header="Salesperson" width="250px">
     </igx-column>
-    <igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [merge]="true">
+    <igx-column field="UnitPrice" header="Unit Price" width="150px" dataType="number">
     </igx-column>
-    <igx-column field="OrderDate" width="200px">
+    <igx-column field="Quantity" header="Quantity" width="150px" dataType="number">
     </igx-column>
     <igx-paginator [perPage]="20">
     </igx-paginator>
-    <igx-action-strip>
+    <!-- <igx-action-strip>
         <igx-grid-pinning-actions></igx-grid-pinning-actions>
-    </igx-action-strip>
+    </igx-action-strip> -->
     <igx-grid-toolbar>
         <igx-grid-toolbar-actions>
             <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
             <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-            <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
         </igx-grid-toolbar-actions>
     </igx-grid-toolbar>
 </igx-grid>
 
 <h4 class="sample-title">Hierarchical grid with cell merge</h4>
 
-<igx-hierarchical-grid #hierarchicalGrid width="800px" [height]="'550px'" [data]="hierarchicalData" [autoGenerate]="false"
+<igx-hierarchical-grid #hierarchicalGrid width="800px" [rowSelection]="'single'" [height]="'550px'" [data]="hierarchicalData" [autoGenerate]="false"
     [allowAdvancedFiltering]="true" [cellMergeMode]="'always'">
     <igx-grid-toolbar></igx-grid-toolbar>
-    <igx-column field="EmployeeID" width="200px">
+    <igx-column field="EmployeeID" width="200px" [hidden]="true">
     </igx-column>
     <igx-column field="FirstName" width="200px">
     </igx-column>
@@ -108,7 +109,7 @@ <h4 class="sample-title">Hierarchical grid with cell merge</h4>
 
 <h4 class="sample-title">Tree grid with cell merge</h4>
 
-<igx-tree-grid [autoGenerate]="false" [data]="treeData" [cellMergeMode]="'always'" [mergeStrategy]="treeGridMergeStrategy"
+<igx-tree-grid [autoGenerate]="false" [rowSelection]="'single'" [data]="treeData" [cellMergeMode]="'always'" [mergeStrategy]="treeGridMergeStrategy"
 childDataKey="ChildCompanies" primaryKey="ID" [expansionDepth]="1" width="800px" [height]="'550px'">
 <igx-column field="ContactName" width="200px">
 </igx-column>

src/app/grid-cellMerging/grid-cellMerging.component.scss

@@ -17,3 +17,6 @@
 .grid-size {
     --ig-size: var(--ig-size-small);
 }
+.searchInput{
+    width: 800px;
+}