diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css
index d1bab18e01de..3fa0b19e6f3e 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css
@@ -36,7 +36,7 @@
 }
 
 .option {
-  width: 24%;
+  width: 30%;
   margin-top: 10px;
   margin-right: 9px;
   box-sizing: border-box;
@@ -47,8 +47,11 @@
 
 .options-container {
   display: flex;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-direction: column;
+}
+
+.options-section {
+  display: flex;
 }
 
 ::ng-deep .editor-container {
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.html b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.html
index 8051c26f4359..cef8ccbeeccc 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.html
@@ -7,6 +7,7 @@ <h4>Employees</h4>
     [height]="320"
     [showCheckBoxesMode]="showCheckBoxesMode"
     [selectionMode]="selectionMode"
+    [disabledNodeSelectionMode]="disabledNodeSelectionMode"
     [selectNodesRecursive]="selectNodesRecursive"
     [selectByClick]="selectByClick"
     (onSelectionChanged)="treeViewSelectionChanged($event)"
@@ -25,9 +26,9 @@ <h4>Employees</h4>
       [items]="selectedEmployees"
       showScrollbar="always"
     >
-      <dxi-list-item *ngFor="let item of selectedEmployees">
+      <div *dxTemplate="let item of 'item'">
         {{ item.prefix + " " + item.fullName + " (" + item.position + ")" }}
-      </dxi-list-item>
+      </div>
     </dx-list>
   </div>
 </div>
@@ -35,46 +36,61 @@ <h4>Employees</h4>
 <div class="options">
   <div class="caption">Options</div>
   <div class="options-container">
-    <div class="option">
-      <span>Show Check Boxes Mode:</span>
-      <div class="editor-container">
-        <dx-select-box
-          [items]="showCheckBoxesModes"
-          [inputAttr]="{ 'aria-label': 'Show Checkboxes Mode' }"
-          [value]="showCheckBoxesMode"
-          (onValueChanged)="showCheckBoxesModeValueChanged($event)"
-        ></dx-select-box>
+    <div class="options-section">
+      <div class="option">
+        <span>Show Check Boxes Mode:</span>
+        <div class="editor-container">
+          <dx-select-box
+            [items]="showCheckBoxesModes"
+            [inputAttr]="{ 'aria-label': 'Show Checkboxes Mode' }"
+            [value]="showCheckBoxesMode"
+            (onValueChanged)="showCheckBoxesModeValueChanged($event)"
+          ></dx-select-box>
+        </div>
       </div>
-    </div>
-    <div class="option">
-      <span>Selection Mode:</span>
-      <div class="editor-container">
-        <dx-select-box
-          [items]="selectionModes"
-          [value]="selectionMode"
-          [inputAttr]="{ 'aria-label': 'Selection Mode' }"
-          [disabled]="isSelectionModeDisabled"
-          (onValueChanged)="selectionModeValueChanged($event)"
-        ></dx-select-box>
+      <div class="option">
+        <span>Selection Mode:</span>
+        <div class="editor-container">
+          <dx-select-box
+            [items]="selectionModes"
+            [value]="selectionMode"
+            [inputAttr]="{ 'aria-label': 'Selection Mode' }"
+            [disabled]="isSelectionModeDisabled"
+            (onValueChanged)="selectionModeValueChanged($event)"
+          ></dx-select-box>
+        </div>
       </div>
-    </div>
-    <div class="option">
-      <div class="caption-placeholder">&nbsp;</div>
-      <div class="editor-container">
-        <dx-check-box
-          text="Select Nodes Recursive"
-          [disabled]="isRecursiveDisabled"
-          [(value)]="selectNodesRecursive"
-        ></dx-check-box>
+      <div class="option">
+        <span>Disabled Node Selection Mode:</span>
+        <div class="editor-container">
+          <dx-select-box
+            [items]="disabledNodeSelectionModes"
+            [value]="disabledNodeSelectionMode"
+            [inputAttr]="{ 'aria-label': 'Disabled Node Selection Mode' }"
+            (onValueChanged)="disabledNodeSelectionModeValueChanged($event)"
+          ></dx-select-box>
+        </div>
       </div>
     </div>
-    <div class="option">
-      <div class="caption-placeholder">&nbsp;</div>
-      <div class="editor-container">
-        <dx-check-box
-          text="Select By Click"
-          [(value)]="selectByClick"
-        ></dx-check-box>
+    <div class="options-section">
+      <div class="option">
+        <div class="caption-placeholder">&nbsp;</div>
+        <div class="editor-container">
+          <dx-check-box
+            text="Select Nodes Recursive"
+            [disabled]="isRecursiveDisabled"
+            [(value)]="selectNodesRecursive"
+          ></dx-check-box>
+        </div>
+      </div>
+      <div class="option">
+        <div class="caption-placeholder">&nbsp;</div>
+        <div class="editor-container">
+          <dx-check-box
+            text="Select By Click"
+            [(value)]="selectByClick"
+          ></dx-check-box>
+        </div>
       </div>
     </div>
   </div>
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts
index 2f128049caf7..654b45950929 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts
@@ -54,6 +54,10 @@ export class AppComponent {
 
   selectionMode = this.selectionModes[0];
 
+  disabledNodeSelectionModes: DxTreeViewTypes.DisabledNodeSelectionMode[] = ['never', 'recursiveAndAll'];
+
+  disabledNodeSelectionMode = this.disabledNodeSelectionModes[0];
+
   selectNodesRecursive = true;
 
   selectByClick = false;
@@ -98,6 +102,10 @@ export class AppComponent {
       this.treeView.instance.unselectAll();
     }
   }
+
+  disabledNodeSelectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
+    this.disabledNodeSelectionMode = e.value;
+  }
 }
 
 bootstrapApplication(AppComponent, {
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.service.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.service.ts
index 35d874fe05fe..ed5c25d847b7 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.service.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.service.ts
@@ -13,6 +13,8 @@ export class Employee {
 
   selected?: boolean;
 
+  disabled?: boolean;
+
   items?: Employee[];
 }
 
@@ -28,6 +30,7 @@ const employees: Employee[] = [{
     prefix: 'Dr.',
     position: 'COO',
     expanded: true,
+    disabled: true,
     items: [{
       id: 3,
       fullName: 'Kevin Carter',
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/App.tsx b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/App.tsx
index 4746985623b3..96b4500c70b1 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/App.tsx
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/App.tsx
@@ -5,11 +5,17 @@ import List from 'devextreme-react/list';
 import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
 import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
 
-import { employees, showCheckboxesModeLabel, selectionModeLabel } from './data.ts';
+import {
+  employees,
+  showCheckboxesModeLabel,
+  selectionModeLabel,
+  disabledNodeSelectionModeLabel,
+} from './data.ts';
 import type { Employee } from './types';
 
 const showCheckBoxesModes: TreeViewTypes.TreeViewCheckBoxMode[] = ['normal', 'selectAll', 'none'];
 const selectionModes: TreeViewTypes.SingleOrMultiple[] = ['multiple', 'single'];
+const disabledNodeSelectionModes: TreeViewTypes.DisabledNodeSelectionMode[] = ['never', 'recursiveAndAll'];
 
 const renderTreeViewItem = (item: Employee): string => `${item.fullName} (${item.position})`;
 
@@ -22,6 +28,7 @@ const App = () => {
   const [selectByClick, setSelectByClick] = useState<boolean>(false);
   const [showCheckBoxesMode, setShowCheckBoxesMode] = useState<TreeViewTypes.TreeViewCheckBoxMode>(showCheckBoxesModes[0]);
   const [selectionMode, setSelectionMode] = useState<TreeViewTypes.SingleOrMultiple>(selectionModes[0]);
+  const [disabledNodeSelectionMode, setDisabledNodeSelectionMode] = useState<TreeViewTypes.DisabledNodeSelectionMode>(disabledNodeSelectionModes[0]);
   const [isSelectionModeDisabled, setIsSelectionModeDisabled] = useState<boolean>(false);
   const [isRecursiveDisabled, setIsRecursiveDisabled] = useState<boolean>(false);
 
@@ -62,6 +69,10 @@ const App = () => {
     setIsRecursiveDisabled(value === 'single');
   }, []);
 
+  const disabledNodeSelectionModeValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
+    setDisabledNodeSelectionMode(e.value);
+  }, []);
+
   const selectNodesRecursiveValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
     setSelectNodesRecursive(e.value);
   }, []);
@@ -84,6 +95,7 @@ const App = () => {
           selectByClick={selectByClick}
           showCheckBoxesMode={showCheckBoxesMode}
           selectionMode={selectionMode}
+          disabledNodeSelectionMode={disabledNodeSelectionMode}
           onSelectionChanged={treeViewSelectionChanged}
           onContentReady={treeViewContentReady}
           itemRender={renderTreeViewItem}
@@ -103,44 +115,58 @@ const App = () => {
       <div className="options">
         <div className="caption">Options</div>
         <div className="options-container">
-          <div className="option">
-            <span>Show Check Boxes Mode:</span>
-            <div className="editor-container">
-              <SelectBox
-                items={showCheckBoxesModes}
-                value={showCheckBoxesMode}
-                inputAttr={showCheckboxesModeLabel}
-                onValueChanged={showCheckBoxesModeValueChanged} />
+          <div className="options-section">
+            <div className="option">
+              <span>Show Check Boxes Mode:</span>
+              <div className="editor-container">
+                <SelectBox
+                  items={showCheckBoxesModes}
+                  value={showCheckBoxesMode}
+                  inputAttr={showCheckboxesModeLabel}
+                  onValueChanged={showCheckBoxesModeValueChanged} />
+              </div>
             </div>
-          </div>
-          <div className="option">
-            <span>Selection Mode:</span>
-            <div className="editor-container">
-              <SelectBox
-                items={selectionModes}
-                value={selectionMode}
-                inputAttr={selectionModeLabel}
-                disabled={isSelectionModeDisabled}
-                onValueChanged={selectionModeValueChanged} />
+            <div className="option">
+              <span>Selection Mode:</span>
+              <div className="editor-container">
+                <SelectBox
+                  items={selectionModes}
+                  value={selectionMode}
+                  inputAttr={selectionModeLabel}
+                  disabled={isSelectionModeDisabled}
+                  onValueChanged={selectionModeValueChanged} />
+              </div>
             </div>
-          </div>
-          <div className="option">
-            <div className="caption-placeholder">&nbsp;</div>
-            <div className="editor-container">
-              <CheckBox
-                text="Select Nodes Recursive"
-                value={selectNodesRecursive}
-                disabled={isRecursiveDisabled}
-                onValueChanged={selectNodesRecursiveValueChanged} />
+            <div className="option">
+              <span>Disabled Node Selection Mode:</span>
+              <div className="editor-container">
+                <SelectBox
+                  items={disabledNodeSelectionModes}
+                  value={disabledNodeSelectionMode}
+                  inputAttr={disabledNodeSelectionModeLabel}
+                  onValueChanged={disabledNodeSelectionModeValueChanged} />
+              </div>
             </div>
           </div>
-          <div className="option">
-            <div className="caption-placeholder">&nbsp;</div>
-            <div className="editor-container">
-              <CheckBox
-                text="Select By Click"
-                value={selectByClick}
-                onValueChanged={selectByClickValueChanged} />
+          <div className="options-section">
+            <div className="option">
+              <div className="caption-placeholder">&nbsp;</div>
+              <div className="editor-container">
+                <CheckBox
+                  text="Select Nodes Recursive"
+                  value={selectNodesRecursive}
+                  disabled={isRecursiveDisabled}
+                  onValueChanged={selectNodesRecursiveValueChanged} />
+              </div>
+            </div>
+            <div className="option">
+              <div className="caption-placeholder">&nbsp;</div>
+              <div className="editor-container">
+                <CheckBox
+                  text="Select By Click"
+                  value={selectByClick}
+                  onValueChanged={selectByClickValueChanged} />
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/data.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/data.ts
index 1c3661899f19..39a42c744a2f 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/data.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/data.ts
@@ -12,6 +12,7 @@ export const employees: Employee[] = [{
     prefix: 'Dr.',
     position: 'COO',
     expanded: true,
+    disabled: true,
     items: [{
       id: 3,
       fullName: 'Kevin Carter',
@@ -73,3 +74,4 @@ export const employees: Employee[] = [{
 
 export const selectionModeLabel = { 'aria-label': 'Selection Mode' };
 export const showCheckboxesModeLabel = { 'aria-label': 'Show Checkboxes Mode' };
+export const disabledNodeSelectionModeLabel = { 'aria-label': 'Disabled Node Selection Mode' };
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css
index 7df382f08932..c3359c11e892 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css
@@ -37,7 +37,7 @@
 }
 
 .option {
-  width: 24%;
+  width: 30%;
   margin-top: 10px;
   margin-right: 9px;
   box-sizing: border-box;
@@ -48,8 +48,11 @@
 
 .options-container {
   display: flex;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-direction: column;
+}
+
+.options-section {
+  display: flex;
 }
 
 .editor-container {
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/types.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/types.ts
index 33eff77f697e..5d39cb34e3f8 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/types.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/types.ts
@@ -5,5 +5,6 @@ export type Employee = {
   position: string;
   expanded?: boolean;
   selected?: boolean;
+  disabled?: boolean;
   items?: Employee[];
 };
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/App.js b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/App.js
index de995b42e65b..95dc048d3543 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/App.js
@@ -3,10 +3,16 @@ import TreeView from 'devextreme-react/tree-view';
 import List from 'devextreme-react/list';
 import SelectBox from 'devextreme-react/select-box';
 import CheckBox from 'devextreme-react/check-box';
-import { employees, showCheckboxesModeLabel, selectionModeLabel } from './data.js';
+import {
+  employees,
+  showCheckboxesModeLabel,
+  selectionModeLabel,
+  disabledNodeSelectionModeLabel,
+} from './data.js';
 
 const showCheckBoxesModes = ['normal', 'selectAll', 'none'];
 const selectionModes = ['multiple', 'single'];
+const disabledNodeSelectionModes = ['never', 'recursiveAndAll'];
 const renderTreeViewItem = (item) => `${item.fullName} (${item.position})`;
 const renderListItem = (item) => `${item.prefix} ${item.fullName} (${item.position})`;
 const App = () => {
@@ -16,6 +22,9 @@ const App = () => {
   const [selectByClick, setSelectByClick] = useState(false);
   const [showCheckBoxesMode, setShowCheckBoxesMode] = useState(showCheckBoxesModes[0]);
   const [selectionMode, setSelectionMode] = useState(selectionModes[0]);
+  const [disabledNodeSelectionMode, setDisabledNodeSelectionMode] = useState(
+    disabledNodeSelectionModes[0],
+  );
   const [isSelectionModeDisabled, setIsSelectionModeDisabled] = useState(false);
   const [isRecursiveDisabled, setIsRecursiveDisabled] = useState(false);
   const syncSelection = useCallback((treeView) => {
@@ -52,6 +61,9 @@ const App = () => {
     }
     setIsRecursiveDisabled(value === 'single');
   }, []);
+  const disabledNodeSelectionModeValueChanged = useCallback((e) => {
+    setDisabledNodeSelectionMode(e.value);
+  }, []);
   const selectNodesRecursiveValueChanged = useCallback((e) => {
     setSelectNodesRecursive(e.value);
   }, []);
@@ -72,6 +84,7 @@ const App = () => {
           selectByClick={selectByClick}
           showCheckBoxesMode={showCheckBoxesMode}
           selectionMode={selectionMode}
+          disabledNodeSelectionMode={disabledNodeSelectionMode}
           onSelectionChanged={treeViewSelectionChanged}
           onContentReady={treeViewContentReady}
           itemRender={renderTreeViewItem}
@@ -91,48 +104,63 @@ const App = () => {
       <div className="options">
         <div className="caption">Options</div>
         <div className="options-container">
-          <div className="option">
-            <span>Show Check Boxes Mode:</span>
-            <div className="editor-container">
-              <SelectBox
-                items={showCheckBoxesModes}
-                value={showCheckBoxesMode}
-                inputAttr={showCheckboxesModeLabel}
-                onValueChanged={showCheckBoxesModeValueChanged}
-              />
+          <div className="options-section">
+            <div className="option">
+              <span>Show Check Boxes Mode:</span>
+              <div className="editor-container">
+                <SelectBox
+                  items={showCheckBoxesModes}
+                  value={showCheckBoxesMode}
+                  inputAttr={showCheckboxesModeLabel}
+                  onValueChanged={showCheckBoxesModeValueChanged}
+                />
+              </div>
             </div>
-          </div>
-          <div className="option">
-            <span>Selection Mode:</span>
-            <div className="editor-container">
-              <SelectBox
-                items={selectionModes}
-                value={selectionMode}
-                inputAttr={selectionModeLabel}
-                disabled={isSelectionModeDisabled}
-                onValueChanged={selectionModeValueChanged}
-              />
+            <div className="option">
+              <span>Selection Mode:</span>
+              <div className="editor-container">
+                <SelectBox
+                  items={selectionModes}
+                  value={selectionMode}
+                  inputAttr={selectionModeLabel}
+                  disabled={isSelectionModeDisabled}
+                  onValueChanged={selectionModeValueChanged}
+                />
+              </div>
             </div>
-          </div>
-          <div className="option">
-            <div className="caption-placeholder">&nbsp;</div>
-            <div className="editor-container">
-              <CheckBox
-                text="Select Nodes Recursive"
-                value={selectNodesRecursive}
-                disabled={isRecursiveDisabled}
-                onValueChanged={selectNodesRecursiveValueChanged}
-              />
+            <div className="option">
+              <span>Disabled Node Selection Mode:</span>
+              <div className="editor-container">
+                <SelectBox
+                  items={disabledNodeSelectionModes}
+                  value={disabledNodeSelectionMode}
+                  inputAttr={disabledNodeSelectionModeLabel}
+                  onValueChanged={disabledNodeSelectionModeValueChanged}
+                />
+              </div>
             </div>
           </div>
-          <div className="option">
-            <div className="caption-placeholder">&nbsp;</div>
-            <div className="editor-container">
-              <CheckBox
-                text="Select By Click"
-                value={selectByClick}
-                onValueChanged={selectByClickValueChanged}
-              />
+          <div className="options-section">
+            <div className="option">
+              <div className="caption-placeholder">&nbsp;</div>
+              <div className="editor-container">
+                <CheckBox
+                  text="Select Nodes Recursive"
+                  value={selectNodesRecursive}
+                  disabled={isRecursiveDisabled}
+                  onValueChanged={selectNodesRecursiveValueChanged}
+                />
+              </div>
+            </div>
+            <div className="option">
+              <div className="caption-placeholder">&nbsp;</div>
+              <div className="editor-container">
+                <CheckBox
+                  text="Select By Click"
+                  value={selectByClick}
+                  onValueChanged={selectByClickValueChanged}
+                />
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/data.js b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/data.js
index 8af188e7a5bf..0534bd96f07a 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/data.js
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/data.js
@@ -12,6 +12,7 @@ export const employees = [
         prefix: 'Dr.',
         position: 'COO',
         expanded: true,
+        disabled: true,
         items: [
           {
             id: 3,
@@ -87,3 +88,4 @@ export const employees = [
 ];
 export const selectionModeLabel = { 'aria-label': 'Selection Mode' };
 export const showCheckboxesModeLabel = { 'aria-label': 'Show Checkboxes Mode' };
+export const disabledNodeSelectionModeLabel = { 'aria-label': 'Disabled Node Selection Mode' };
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css
index 7df382f08932..c3359c11e892 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css
@@ -37,7 +37,7 @@
 }
 
 .option {
-  width: 24%;
+  width: 30%;
   margin-top: 10px;
   margin-right: 9px;
   box-sizing: border-box;
@@ -48,8 +48,11 @@
 
 .options-container {
   display: flex;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-direction: column;
+}
+
+.options-section {
+  display: flex;
 }
 
 .editor-container {
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
index c240878b5cd2..0bf537dab5d8 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
@@ -10,6 +10,7 @@
         :items="employees"
         :show-check-boxes-mode="showCheckBoxesModeValue"
         :selection-mode="selectionModeValue"
+        :disabled-node-selection-mode="disabledNodeSelectionModeValue"
         :select-nodes-recursive="selectNodesRecursiveValue"
         :select-by-click="selectByClickValue"
         @selection-changed="treeViewSelectionChanged"
@@ -37,46 +38,60 @@
     <div class="options">
       <div class="caption">Options</div>
       <div class="options-container">
-        <div class="option">
-          <span>Show Check Boxes Mode:</span>
-          <div class="editor-container">
-            <DxSelectBox
-              :items="showCheckBoxesModes"
-              :input-attr="{ 'aria-label': 'Show Checkboxes Mode' }"
-              v-model:value="showCheckBoxesModeValue"
-              @value-changed="showCheckBoxesModeValueChanged"
-            />
+        <div class="options-section">
+          <div class="option">
+            <span>Show Check Boxes Mode:</span>
+            <div class="editor-container">
+              <DxSelectBox
+                :items="showCheckBoxesModes"
+                :input-attr="{ 'aria-label': 'Show Checkboxes Mode' }"
+                v-model:value="showCheckBoxesModeValue"
+                @value-changed="showCheckBoxesModeValueChanged"
+              />
+            </div>
           </div>
-        </div>
-        <div class="option">
-          <span>Selection Mode:</span>
-          <div class="editor-container">
-            <DxSelectBox
-              :items="selectionModes"
-              v-model:value="selectionModeValue"
-              :input-attr="{ 'aria-label': 'Selection Mode' }"
-              :disabled="isSelectionModeDisabled"
-              @value-changed="selectionModeValueChanged"
-            />
+          <div class="option">
+            <span>Selection Mode:</span>
+            <div class="editor-container">
+              <DxSelectBox
+                :items="selectionModes"
+                v-model:value="selectionModeValue"
+                :input-attr="{ 'aria-label': 'Selection Mode' }"
+                :disabled="isSelectionModeDisabled"
+                @value-changed="selectionModeValueChanged"
+              />
+            </div>
           </div>
-        </div>
-        <div class="option">
-          <div class="caption-placeholder">&nbsp;</div>
-          <div class="editor-container">
-            <DxCheckBox
-              text="Select Nodes Recursive"
-              :disabled="isRecursiveDisabled"
-              v-model:value="selectNodesRecursiveValue"
-            />
+          <div class="option">
+            <span>Disabled Node Selection Mode:</span>
+            <div class="editor-container">
+              <DxSelectBox
+                :items="disabledNodeSelectionModes"
+                v-model:value="disabledNodeSelectionModeValue"
+                :input-attr="{ 'aria-label': 'Disabled Node Selection Mode' }"
+              />
+            </div>
           </div>
         </div>
-        <div class="option">
-          <div class="caption-placeholder">&nbsp;</div>
-          <div class="editor-container">
-            <DxCheckBox
-              text="Select By Click"
-              v-model:value="selectByClickValue"
-            />
+        <div class="options-section">
+          <div class="option">
+            <div class="caption-placeholder">&nbsp;</div>
+            <div class="editor-container">
+              <DxCheckBox
+                text="Select Nodes Recursive"
+                :disabled="isRecursiveDisabled"
+                v-model:value="selectNodesRecursiveValue"
+              />
+            </div>
+          </div>
+          <div class="option">
+            <div class="caption-placeholder">&nbsp;</div>
+            <div class="editor-container">
+              <DxCheckBox
+                text="Select By Click"
+                v-model:value="selectByClickValue"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -95,9 +110,11 @@ import type { Employee } from './types';
 
 const selectionModes: SingleOrMultiple[] = ['multiple', 'single'];
 const showCheckBoxesModes: DxTreeViewTypes.TreeViewCheckBoxMode[] = ['normal', 'selectAll', 'none'];
+const disabledNodeSelectionModes: DxTreeViewTypes.DisabledNodeSelectionMode[] = ['never', 'recursiveAndAll'];
 const selectedEmployees = ref([]);
 const showCheckBoxesModeValue = ref(showCheckBoxesModes[0]);
 const selectionModeValue = ref(selectionModes[0]);
+const disabledNodeSelectionModeValue = ref(disabledNodeSelectionModes[0]);
 const isSelectionModeDisabled = ref(false);
 const isRecursiveDisabled = ref(false);
 const selectNodesRecursiveValue = ref(true);
@@ -170,7 +187,7 @@ function selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 }
 
 .option {
-  width: 24%;
+  width: 30%;
   margin-top: 10px;
   margin-right: 9px;
   box-sizing: border-box;
@@ -181,8 +198,11 @@ function selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 
 .options-container {
   display: flex;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-direction: column;
+}
+
+.options-section {
+  display: flex;
 }
 
 .editor-container {
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/data.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/data.ts
index 5c86e574edad..ac82bfc27f95 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/data.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/data.ts
@@ -12,6 +12,7 @@ export const employees: Employee[] = [{
     prefix: 'Dr.',
     position: 'COO',
     expanded: true,
+    disabled: true,
     items: [{
       id: 3,
       fullName: 'Kevin Carter',
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/types.ts b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/types.ts
index 71a22cc820a1..8f4b69c60253 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/types.ts
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/types.ts
@@ -5,5 +5,6 @@ export interface Employee {
   position: string;
   expanded?: boolean;
   selected?: boolean;
+  disabled?: boolean;
   items?: Employee[];
 }
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/data.js b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/data.js
index bf08a81a34a5..2e4490b11278 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/data.js
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/data.js
@@ -10,6 +10,7 @@ const employees = [{
     prefix: 'Dr.',
     position: 'COO',
     expanded: true,
+    disabled: true,
     items: [{
       id: 3,
       fullName: 'Kevin Carter',
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.html b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.html
index ce9160062083..4af6ea988746 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.html
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.html
@@ -27,28 +27,38 @@ <h4>Employees</h4>
       <div class="options">
         <div class="caption">Options</div>
         <div class="options-container">
-          <div class="option">
-            <span>Show Check Boxes Mode:</span>
-            <div class="editor-container">
-              <div id="showCheckBoxesMode"></div>
+          <div class="options-section">
+            <div class="option">
+              <span>Show Check Boxes Mode:</span>
+              <div class="editor-container">
+                <div id="showCheckBoxesMode"></div>
+              </div>
             </div>
-          </div>
-          <div class="option">
-            <span>Selection Mode:</span>
-            <div class="editor-container">
-              <div id="selectionMode"></div>
+            <div class="option">
+              <span>Selection Mode:</span>
+              <div class="editor-container">
+                <div id="selectionMode"></div>
+              </div>
             </div>
-          </div>
-          <div class="option">
-            <div class="caption-placeholder">&nbsp;</div>
-            <div class="editor-container">
-              <div id="selectNodesRecursive"></div>
+            <div class="option">
+              <span>Disabled Node Selection Mode:</span>
+              <div class="editor-container">
+                <div id="disabledNodeSelectionMode"></div>
+              </div>
             </div>
           </div>
-          <div class="option">
-            <div class="caption-placeholder">&nbsp;</div>
-            <div class="editor-container">
-              <div id="selectByClick"></div>
+          <div class="options-section">
+            <div class="option">
+              <div class="caption-placeholder">&nbsp;</div>
+              <div class="editor-container">
+                <div id="selectNodesRecursive"></div>
+              </div>
+            </div>
+            <div class="option">
+              <div class="caption-placeholder">&nbsp;</div>
+              <div class="editor-container">
+                <div id="selectByClick"></div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.js b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.js
index 0fbdb2e1d3c6..2b97862abd1b 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.js
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/index.js
@@ -13,6 +13,7 @@ $(() => {
     width: 340,
     height: 320,
     showCheckBoxesMode: 'normal',
+    disabledNodeSelectionMode: 'never',
     onSelectionChanged(e) {
       syncSelection(e.component);
     },
@@ -62,6 +63,15 @@ $(() => {
     },
   }).dxSelectBox('instance');
 
+  $('#disabledNodeSelectionMode').dxSelectBox({
+    items: ['never', 'recursiveAndAll'],
+    inputAttr: { 'aria-label': 'Disabled Node Selection Mode' },
+    value: 'never',
+    onValueChanged(e) {
+      treeView.option('disabledNodeSelectionMode', e.value);
+    },
+  });
+
   const recursiveCheckBox = $('#selectNodesRecursive').dxCheckBox({
     text: 'Select Nodes Recursive',
     value: true,
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css
index 8580eace021f..d8dd0b37daa4 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css
@@ -37,7 +37,7 @@
 }
 
 .option {
-  width: 24%;
+  width: 30%;
   margin-top: 10px;
   margin-right: 9px;
   box-sizing: border-box;
@@ -48,8 +48,11 @@
 
 .options-container {
   display: flex;
-  justify-content: space-between;
-  align-items: stretch;
+  flex-direction: column;
+}
+
+.options-section {
+  display: flex;
 }
 
 .editor-container {
diff --git a/apps/demos/menuMeta.json b/apps/demos/menuMeta.json
index d734d49535b0..2df5e0acaae5 100644
--- a/apps/demos/menuMeta.json
+++ b/apps/demos/menuMeta.json
@@ -5809,6 +5809,7 @@
                 "Name": "ItemSelectionAndCustomization",
                 "DocUrl": "Guide/UI_Components/TreeView/Select_Nodes/",
                 "Widget": "TreeView",
+                "Badge": "Updated",
                 "MvcAdditionalFiles": [
                   "/Models/TreeView/Employee.cs",
                   "/Models/SampleData/TreeViewHierarchicalDataForSelection.cs"
diff --git a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent.blue.light).png b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent.blue.light).png
index 3dbc4bd91bfc..63c7fa96540a 100644
Binary files a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent.blue.light).png and b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png
index 93656571cb31..0067cdf8c51e 100644
Binary files a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/ItemSelectionAndCustomization.test.ts b/apps/demos/testing/widgets/treeview/ItemSelectionAndCustomization.test.ts
index 34108520ef35..bc681e7d9908 100644
--- a/apps/demos/testing/widgets/treeview/ItemSelectionAndCustomization.test.ts
+++ b/apps/demos/testing/widgets/treeview/ItemSelectionAndCustomization.test.ts
@@ -5,14 +5,18 @@ import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils'
 
 const OPTION_CLASS = 'option';
 const SELECTBOX_CLASS = 'dx-selectbox';
+const SELECTBOX_POPUP_WRAPPER_CLASS = 'dx-selectbox-popup-wrapper';
+const LIST_ITEM_CLASS = 'dx-list-item';
+const TREEVIEW_NODE_CLASS = 'dx-treeview-node';
+const CHECKBOX_CLASS = 'dx-checkbox';
 
 fixture('TreeView.ItemSelectionAndCustomization')
   .before(async (ctx) => {
-    ctx.initialWindowSize = [900, 1200];
+    ctx.initialWindowSize = [900, 800];
   });
 
 runManualTest('TreeView', 'ItemSelectionAndCustomization', (test) => {
-  test('ItemSelectionAndCustomization', async (t) => {
+  test('Open select box', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
     await t
@@ -24,4 +28,31 @@ runManualTest('TreeView', 'ItemSelectionAndCustomization', (test) => {
       .expect(compareResults.isValid())
       .ok(compareResults.errorMessages());
   });
+
+  test('Disabled Node Selection Mode', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    const rootNodeCheckbox = $(`.${TREEVIEW_NODE_CLASS} .${CHECKBOX_CLASS}`).nth(0);
+
+    await t
+      .click(rootNodeCheckbox);
+
+    await testScreenshot(t, takeScreenshot, 'treeview_disabled_node_selection_mode_never.png');
+
+    await t
+      .click(rootNodeCheckbox)
+      .click($(`.${OPTION_CLASS} .${SELECTBOX_CLASS}`).nth(2))
+      .click($(`.${SELECTBOX_POPUP_WRAPPER_CLASS} .${LIST_ITEM_CLASS}`).nth(1));
+
+    await testScreenshot(t, takeScreenshot, 'treeview_disabled_node_selection_mode_recursive_and_all.png');
+
+    await t
+      .click(rootNodeCheckbox);
+
+    await testScreenshot(t, takeScreenshot, 'treeview_disabled_node_selection_mode_select_all_children.png');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
 });
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (fluent.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (fluent.blue.light).png
new file mode 100644
index 000000000000..503d773947e7
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (material.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (material.blue.light).png
new file mode 100644
index 000000000000..cbfef25c1b8c
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (fluent.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (fluent.blue.light).png
new file mode 100644
index 000000000000..8a87b4e159b1
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (material.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (material.blue.light).png
new file mode 100644
index 000000000000..5b7d335a7ca0
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (fluent.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (fluent.blue.light).png
new file mode 100644
index 000000000000..2fcdeb27b159
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (material.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (material.blue.light).png
new file mode 100644
index 000000000000..dff0d38497ce
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (fluent.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (fluent.blue.light).png
index 0291604502ef..28ce3486dd99 100644
Binary files a/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (fluent.blue.light).png and b/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (material.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (material.blue.light).png
index 68ab3a4a9fc9..055130220eb6 100644
Binary files a/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (material.blue.light).png and b/apps/demos/testing/widgets/treeview/etalons/treeview_selection_field_is_open (material.blue.light).png differ