TreeView: update demo with new option disabledNodeSelectionMode

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 {

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,56 +26,71 @@ <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>
 
 <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>

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, {

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',

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>

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' };

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 {

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[];
 };