diff --git a/samples/grids/grid/column-moving-options/src/index.tsx b/samples/grids/grid/column-moving-options/src/index.tsx
index 4fd453d4d0..208ccb1f92 100644
--- a/samples/grids/grid/column-moving-options/src/index.tsx
+++ b/samples/grids/grid/column-moving-options/src/index.tsx
@@ -159,7 +159,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/grid/column-moving-styles/src/index.tsx b/samples/grids/grid/column-moving-styles/src/index.tsx
index e7289ab61a..5a833b1ef8 100644
--- a/samples/grids/grid/column-moving-styles/src/index.tsx
+++ b/samples/grids/grid/column-moving-styles/src/index.tsx
@@ -153,7 +153,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/grid/column-pinning-options/src/index.tsx b/samples/grids/grid/column-pinning-options/src/index.tsx
index 7c8a09942d..2ddb59b241 100644
--- a/samples/grids/grid/column-pinning-options/src/index.tsx
+++ b/samples/grids/grid/column-pinning-options/src/index.tsx
@@ -118,7 +118,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/grid/column-selection-mode/src/index.tsx b/samples/grids/grid/column-selection-mode/src/index.tsx
index fd5b42a4cb..9a0f16a99a 100644
--- a/samples/grids/grid/column-selection-mode/src/index.tsx
+++ b/samples/grids/grid/column-selection-mode/src/index.tsx
@@ -51,8 +51,10 @@ export default class Sample extends React.Component<any, any> {
                     isWrappingEnabled="true">
                     <IgrPropertyEditorPropertyDescription
                         propertyPath="ColumnSelection"
-                        name="columnSelectionEditor"
-                        label="Column Selection">
+                        name="ColumnSelectionEditor"
+                        valueType="EnumValue"
+                        dropDownNames={["None", "Single", "Multiple", "MultipleCascade"]}
+                        dropDownValues={["None", "Single", "Multiple", "MultipleCascade"]}>
                     </IgrPropertyEditorPropertyDescription>
                 </IgrPropertyEditorPanel>
             </div>
diff --git a/samples/grids/grid/multi-column-headers-template/src/index.tsx b/samples/grids/grid/multi-column-headers-template/src/index.tsx
index 8c6c4c327d..8fabeaeed3 100644
--- a/samples/grids/grid/multi-column-headers-template/src/index.tsx
+++ b/samples/grids/grid/multi-column-headers-template/src/index.tsx
@@ -153,7 +153,7 @@ export default class Sample extends React.Component<any, any> {
         const column = e.dataContext.column;
         return (
             <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-                <span draggable="false"  onClick={(e: any) => this.toggleColumnGroup(column)}>
+                <span draggable="false" style={{ cursor: 'pointer' }} onClick={(e: any) => this.toggleColumnGroup(column)}>
                     {this.columnGroupStates.get(column) ? "🔽" : "🔼"}
                 </span>
                 <span>{column.header}</span>
diff --git a/samples/grids/grid/row-pinning-extra-column/src/index.css b/samples/grids/grid/row-pinning-extra-column/src/index.css
index 7eb1c7c38e..af7019403b 100644
--- a/samples/grids/grid/row-pinning-extra-column/src/index.css
+++ b/samples/grids/grid/row-pinning-extra-column/src/index.css
@@ -1,2 +1,13 @@
 /* shared styles are loaded from: */
 /* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.customIcon {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.customIconSpan {
+    cursor: pointer;
+}
+
diff --git a/samples/grids/grid/row-pinning-extra-column/src/index.tsx b/samples/grids/grid/row-pinning-extra-column/src/index.tsx
index 0ebbd05002..fc257db07d 100644
--- a/samples/grids/grid/row-pinning-extra-column/src/index.tsx
+++ b/samples/grids/grid/row-pinning-extra-column/src/index.tsx
@@ -41,7 +41,7 @@ export default class Sample extends React.Component<any, any> {
                     primaryKey="ID"
                     cellSelection="none">
                     <IgrColumn
-                        width="70px"
+                        width="100px"
                         filterable={false}
                         pinned={true}
                         bodyTemplate={this.webGridRowPinCellTemplate}>
@@ -103,15 +103,23 @@ export default class Sample extends React.Component<any, any> {
     }
 
     public webGridRowPinCellTemplate = (e: {dataContext: IgrCellTemplateContext}) => {
+        const grid = this.grid;
         const index = e.dataContext.cell.row.index;
+        const row = grid.rowList.toArray().find(x => x.index === index);
+        if (row && row.pinned && row.disabled) {
+            return (<></>);
+        }
         return (
-            <span onPointerDown={(e: any) => this.toggleRowPin(index)} style={{ cursor: 'pointer'}}>📌</span>
+            <div className='customIcon'>
+            <span onPointerDown={(e: any) => this.toggleRowPin(index)} className='customIconSpan'>📌</span>
+            </div>
         );
     }
 
     public toggleRowPin(index: number) {
         let grid = this.grid;
         grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
+        grid.markForCheck();
     }
 }
 
diff --git a/samples/grids/grid/row-selection-mode/src/index.tsx b/samples/grids/grid/row-selection-mode/src/index.tsx
index 71965838f4..4975d04360 100644
--- a/samples/grids/grid/row-selection-mode/src/index.tsx
+++ b/samples/grids/grid/row-selection-mode/src/index.tsx
@@ -92,7 +92,11 @@ export default class Sample extends React.Component<any, any> {
                     ref={this.propertyEditorPanel1Ref}>
                     <IgrPropertyEditorPropertyDescription
                         name="selectionType"
-                        propertyPath="RowSelection">
+                        propertyPath="RowSelection"
+                        valueType="EnumValue"
+                        label="Row Selection"
+                        dropDownNames={["None", "Single", "Multiple"]}
+                        dropDownValues={["None", "Single", "Multiple"]}>
                     </IgrPropertyEditorPropertyDescription>
                     <IgrPropertyEditorPropertyDescription
                         name="hideRowSelectors"
diff --git a/samples/grids/hierarchical-grid/column-moving-options/src/index.tsx b/samples/grids/hierarchical-grid/column-moving-options/src/index.tsx
index 68b1a45a6f..a97e250ee0 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/src/index.tsx
+++ b/samples/grids/hierarchical-grid/column-moving-options/src/index.tsx
@@ -186,7 +186,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/src/index.tsx b/samples/grids/hierarchical-grid/column-moving-styles/src/index.tsx
index 053b41a5fb..578c497e62 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/src/index.tsx
+++ b/samples/grids/hierarchical-grid/column-moving-styles/src/index.tsx
@@ -186,7 +186,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/src/index.tsx b/samples/grids/hierarchical-grid/column-pinning-options/src/index.tsx
index f136f9125c..84d681fcb2 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/src/index.tsx
+++ b/samples/grids/hierarchical-grid/column-pinning-options/src/index.tsx
@@ -196,7 +196,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/src/index.tsx b/samples/grids/hierarchical-grid/column-selection-mode/src/index.tsx
index 0ccfbcbbe3..2cb87378cd 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/src/index.tsx
+++ b/samples/grids/hierarchical-grid/column-selection-mode/src/index.tsx
@@ -51,8 +51,10 @@ export default class Sample extends React.Component<any, any> {
                     isWrappingEnabled="true">
                     <IgrPropertyEditorPropertyDescription
                         propertyPath="ColumnSelection"
-                        name="columnSelectionEditor"
-                        label="Column Selection">
+                        name="ColumnSelectionEditor"
+                        valueType="EnumValue"
+                        dropDownNames={["None", "Single", "Multiple", "MultipleCascade"]}
+                        dropDownValues={["None", "Single", "Multiple", "MultipleCascade"]}>
                     </IgrPropertyEditorPropertyDescription>
                 </IgrPropertyEditorPanel>
             </div>
diff --git a/samples/grids/hierarchical-grid/filtering-options/src/index.tsx b/samples/grids/hierarchical-grid/filtering-options/src/index.tsx
index d430fa5bea..f62d22f07e 100644
--- a/samples/grids/hierarchical-grid/filtering-options/src/index.tsx
+++ b/samples/grids/hierarchical-grid/filtering-options/src/index.tsx
@@ -64,13 +64,13 @@ export default class Sample extends React.Component<any, any> {
                     <IgrColumn
                         field="GrammyNominations"
                         header="Grammy Nominations"
-                        dataType="string"
+                        dataType="number"
                         resizable={true}>
                     </IgrColumn>
                     <IgrColumn
                         field="GrammyAwards"
                         header="Grammy Awards"
-                        dataType="string"
+                        dataType="number"
                         resizable={true}>
                     </IgrColumn>
                     <IgrRowIsland
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/src/index.tsx b/samples/grids/hierarchical-grid/row-selection-mode/src/index.tsx
index 3d45bd20b9..100ad38919 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/src/index.tsx
+++ b/samples/grids/hierarchical-grid/row-selection-mode/src/index.tsx
@@ -54,7 +54,11 @@ export default class Sample extends React.Component<any, any> {
                     ref={this.propertyEditorPanel1Ref}>
                     <IgrPropertyEditorPropertyDescription
                         name="selectionType"
-                        propertyPath="RowSelection">
+                        propertyPath="RowSelection"
+                        valueType="EnumValue"
+                        label="Row Selection"
+                        dropDownNames={["None", "Single", "Multiple"]}
+                        dropDownValues={["None", "Single", "Multiple"]}>
                     </IgrPropertyEditorPropertyDescription>
                     <IgrPropertyEditorPropertyDescription
                         name="hideRowSelectors"
diff --git a/samples/grids/tree-grid/column-moving-options/src/index.tsx b/samples/grids/tree-grid/column-moving-options/src/index.tsx
index 7a8f3edcfa..e77b69fd20 100644
--- a/samples/grids/tree-grid/column-moving-options/src/index.tsx
+++ b/samples/grids/tree-grid/column-moving-options/src/index.tsx
@@ -131,7 +131,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/tree-grid/column-moving-styles/src/index.tsx b/samples/grids/tree-grid/column-moving-styles/src/index.tsx
index 1e8fe50f62..69d1f38883 100644
--- a/samples/grids/tree-grid/column-moving-styles/src/index.tsx
+++ b/samples/grids/tree-grid/column-moving-styles/src/index.tsx
@@ -131,7 +131,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/tree-grid/column-pinning-options/src/index.tsx b/samples/grids/tree-grid/column-pinning-options/src/index.tsx
index fc7a9b64c8..c69763f02e 100644
--- a/samples/grids/tree-grid/column-pinning-options/src/index.tsx
+++ b/samples/grids/tree-grid/column-pinning-options/src/index.tsx
@@ -102,7 +102,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/tree-grid/column-pinning-styles/src/index.tsx b/samples/grids/tree-grid/column-pinning-styles/src/index.tsx
index fc7a9b64c8..c69763f02e 100644
--- a/samples/grids/tree-grid/column-pinning-styles/src/index.tsx
+++ b/samples/grids/tree-grid/column-pinning-styles/src/index.tsx
@@ -102,7 +102,7 @@ export default class Sample extends React.Component<any, any> {
         return (
             <div style={{display: 'flex'}}>
                 <span>{column.field}</span>
-                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+                <span style={{marginLeft: 'auto', cursor: 'pointer'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }
diff --git a/samples/grids/tree-grid/column-selection-mode/src/index.tsx b/samples/grids/tree-grid/column-selection-mode/src/index.tsx
index 16ce4ced9c..fd9fe061ca 100644
--- a/samples/grids/tree-grid/column-selection-mode/src/index.tsx
+++ b/samples/grids/tree-grid/column-selection-mode/src/index.tsx
@@ -51,8 +51,10 @@ export default class Sample extends React.Component<any, any> {
                     isWrappingEnabled="true">
                     <IgrPropertyEditorPropertyDescription
                         propertyPath="ColumnSelection"
-                        name="columnSelectionEditor"
-                        label="Column Selection">
+                        name="ColumnSelectionEditor"
+                        valueType="EnumValue"
+                        dropDownNames={["None", "Single", "Multiple", "MultipleCascade"]}
+                        dropDownValues={["None", "Single", "Multiple", "MultipleCascade"]}>
                     </IgrPropertyEditorPropertyDescription>
                 </IgrPropertyEditorPanel>
             </div>
diff --git a/samples/grids/tree-grid/row-selection-mode/src/index.tsx b/samples/grids/tree-grid/row-selection-mode/src/index.tsx
index 2b4e3f1dec..93a7bcddfc 100644
--- a/samples/grids/tree-grid/row-selection-mode/src/index.tsx
+++ b/samples/grids/tree-grid/row-selection-mode/src/index.tsx
@@ -53,7 +53,10 @@ export default class Sample extends React.Component<any, any> {
                     <IgrPropertyEditorPropertyDescription
                         name="selectionType"
                         propertyPath="RowSelection"
-                        label="Row Selection">
+                        valueType="EnumValue"
+                        label="Row Selection"
+                        dropDownNames={["None", "Single", "Multiple"]}
+                        dropDownValues={["None", "Single", "Multiple"]}>
                     </IgrPropertyEditorPropertyDescription>
                     <IgrPropertyEditorPropertyDescription
                         name="hideRowSelectors"