dropdownbox demo improvements (#31816)

Signed-off-by: DuckTieCorpMember <[email protected]>
Signed-off-by: assylbek.danyshbek <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: DuckTieCorpMember

apps/demos/Demos/DropDownBox/SingleSelection/Angular/app/app.component.html

@@ -12,7 +12,6 @@
         [showClearButton]="true"
         [dataSource]="treeDataSource"
         (onValueChanged)="syncTreeViewSelection()"
-        (onOptionChanged)="onTreeBoxOptionChanged($event)"
       >
         <div *dxTemplate="let data of 'content'">
           <dx-tree-view
@@ -44,15 +43,15 @@
         [inputAttr]="{ 'aria-label': 'Owner' }"
         [showClearButton]="true"
         [dataSource]="gridDataSource"
-        (onOptionChanged)="onGridBoxOptionChanged($event)"
       >
         <div *dxTemplate="let data of 'content'">
           <dx-data-grid
             [dataSource]="gridDataSource"
             [columns]="gridColumns"
             [hoverStateEnabled]="true"
             showBorders="true"
-            [(selectedRowKeys)]="gridBoxValue"
+            [selectedRowKeys]="gridBoxValue"
+            (onSelectionChanged)="dataGrid_selectionChanged($event)"
             height="100%"
           >
             <dxo-data-grid-selection mode="single"></dxo-data-grid-selection>

apps/demos/Demos/DropDownBox/SingleSelection/Angular/app/app.component.ts

@@ -7,8 +7,9 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { lastValueFrom } from 'rxjs';
 import { CustomStore } from 'devextreme-angular/common/data';
 import { DxDataGridModule } from 'devextreme-angular';
+import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
 import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
-import { DxDropDownBoxModule, DxDropDownBoxTypes } from 'devextreme-angular/ui/drop-down-box';
+import { DxDropDownBoxModule } from 'devextreme-angular/ui/drop-down-box';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -66,27 +67,23 @@ export class AppComponent {
     } else {
       this.treeView.instance.unselectAll();
     }
+
+    this.isTreeBoxOpened = false;
+    this.ref.detectChanges();
   }
 
   treeView_itemSelectionChanged(e: DxTreeViewTypes.ItemSelectionChangedEvent) {
-    this.treeBoxValue = e.component.getSelectedNodeKeys();
+    const selectedKeys = e.component.getSelectedNodeKeys();
+    this.treeBoxValue = selectedKeys.length > 0 ? selectedKeys[0] : null;
   }
 
-  gridBox_displayExpr = ({ CompanyName, Phone }) => CompanyName && `${CompanyName} <${Phone}>`;
-
-  onTreeBoxOptionChanged(e: DxDropDownBoxTypes.OptionChangedEvent) {
-    if (e.name === 'value') {
-      this.isTreeBoxOpened = false;
-      this.ref.detectChanges();
-    }
+  dataGrid_selectionChanged(e: DxDataGridTypes.SelectionChangedEvent) {
+    this.gridBoxValue = e.selectedRowKeys;
+    this.isGridBoxOpened = false;
+    this.ref.detectChanges();
   }
 
-  onGridBoxOptionChanged(e: DxDropDownBoxTypes.OptionChangedEvent) {
-    if (e.name === 'value') {
-      this.isGridBoxOpened = false;
-      this.ref.detectChanges();
-    }
-  }
+  gridBox_displayExpr = ({ CompanyName, Phone }) => CompanyName && `${CompanyName} <${Phone}>`;
 }
 
 @NgModule({

apps/demos/Demos/DropDownBox/SingleSelection/React/App.tsx

@@ -34,7 +34,8 @@ function App() {
 
   const treeViewItemSelectionChanged = useCallback(
     (e: { component: { getSelectedNodeKeys: () => any } }) => {
-      setTreeBoxValue(e.component.getSelectedNodeKeys());
+      const selectedKeys = e.component.getSelectedNodeKeys();
+      setTreeBoxValue(selectedKeys.length > 0 ? selectedKeys[0] : null);
     },
     [],
   );
@@ -51,10 +52,6 @@ function App() {
     [treeBoxValue],
   );
 
-  const onTreeItemClick = useCallback(() => {
-    setIsTreeBoxOpened(false);
-  }, []);
-
   const treeViewRender = useCallback(
     () => (
       <TreeView
@@ -67,11 +64,10 @@ function App() {
         displayExpr="name"
         selectByClick={true}
         onContentReady={treeViewOnContentReady}
-        onItemClick={onTreeItemClick}
         onItemSelectionChanged={treeViewItemSelectionChanged}
       />
     ),
-    [treeViewRef, treeViewOnContentReady, onTreeItemClick, treeViewItemSelectionChanged],
+    [treeViewRef, treeViewOnContentReady, treeViewItemSelectionChanged],
   );
 
   const dataGridRender = useCallback(
@@ -106,6 +102,8 @@ function App() {
     } else {
       treeViewRef.current.instance().selectItem(e.value);
     }
+
+    setIsTreeBoxOpened(false);
   }, []);
 
   const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => {

apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/App.js

@@ -27,7 +27,8 @@ function App() {
   const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
   const [isTreeBoxOpened, setIsTreeBoxOpened] = useState(false);
   const treeViewItemSelectionChanged = useCallback((e) => {
-    setTreeBoxValue(e.component.getSelectedNodeKeys());
+    const selectedKeys = e.component.getSelectedNodeKeys();
+    setTreeBoxValue(selectedKeys.length > 0 ? selectedKeys[0] : null);
   }, []);
   const dataGridOnSelectionChanged = useCallback((e) => {
     setGridBoxValue(e.selectedRowKeys);
@@ -39,9 +40,6 @@ function App() {
     },
     [treeBoxValue],
   );
-  const onTreeItemClick = useCallback(() => {
-    setIsTreeBoxOpened(false);
-  }, []);
   const treeViewRender = useCallback(
     () => (
       <TreeView
@@ -54,11 +52,10 @@ function App() {
         displayExpr="name"
         selectByClick={true}
         onContentReady={treeViewOnContentReady}
-        onItemClick={onTreeItemClick}
         onItemSelectionChanged={treeViewItemSelectionChanged}
       />
     ),
-    [treeViewRef, treeViewOnContentReady, onTreeItemClick, treeViewItemSelectionChanged],
+    [treeViewRef, treeViewOnContentReady, treeViewItemSelectionChanged],
   );
   const dataGridRender = useCallback(
     () => (
@@ -90,6 +87,7 @@ function App() {
     } else {
       treeViewRef.current.instance().selectItem(e.value);
     }
+    setIsTreeBoxOpened(false);
   }, []);
   const syncDataGridSelection = useCallback((e) => {
     setGridBoxValue(e.value);

apps/demos/Demos/DropDownBox/SingleSelection/Vue/App.vue

@@ -16,16 +16,16 @@
         >
           <template #content="{ data }">
             <DxTreeView
+              ref="treeViewRef"
               :data-source="treeDataSource"
               :select-by-click="true"
               data-structure="plain"
               key-expr="ID"
               parent-id-expr="categoryId"
               selection-mode="single"
               display-expr="name"
-              @content-ready="treeViewContentReady($event)"
+              @content-ready="treeViewContentReady"
               @item-selection-changed="treeViewItemSelectionChanged($event)"
-              @item-click="onTreeItemClick()"
             />
           </template>
         </DxDropDownBox>
@@ -74,57 +74,69 @@ import { ref } from 'vue';
 import DxDropDownBox from 'devextreme-vue/drop-down-box';
 import DxTreeView, { type DxTreeViewTypes } from 'devextreme-vue/tree-view';
 import {
-  DxDataGrid, DxSelection, DxPaging, DxFilterRow, DxScrolling,
+  DxDataGrid,
+  DxSelection,
+  DxPaging,
+  DxFilterRow,
+  DxScrolling,
 } from 'devextreme-vue/data-grid';
 import { CustomStore } from 'devextreme-vue/common/data';
+import type dxTreeView from 'devextreme/ui/tree_view';
 import 'whatwg-fetch';
 
-const treeBoxValue = ref(['1_1']);
+const treeBoxValue = ref('1_1');
 const isGridBoxOpened = ref(false);
 const isTreeBoxOpened = ref(false);
 const gridBoxValue = ref([3]);
 const gridDataSource = makeAsyncDataSource('customers.json');
 const treeDataSource = makeAsyncDataSource('treeProducts.json');
 const gridColumns = ['CompanyName', 'City', 'Phone'];
 
-let treeView: DxTreeView['instance'];
+const treeViewRef = ref<{ instance: dxTreeView } | null>(null);
 
-function treeViewContentReady({ component }: DxTreeViewTypes.ContentReadyEvent) {
-  treeView = component;
-  syncTreeViewSelection();
+function treeViewContentReady({
+  component,
+}: DxTreeViewTypes.ContentReadyEvent) {
+  if (treeBoxValue.value) {
+    component.selectItem(treeBoxValue.value);
+  }
 }
 
 function makeAsyncDataSource(jsonFile: string) {
   return new CustomStore({
     loadMode: 'raw',
     key: 'ID',
     load() {
-      return fetch(`../../../../data/${jsonFile}`)
-        .then((response) => response.json());
+      return fetch(
+        `../../../../data/${jsonFile}`,
+      ).then((response) => response.json());
     },
   });
 }
 
 function syncTreeViewSelection() {
-  treeView?.unselectAll();
+  if (!treeViewRef?.value?.instance) return;
 
   if (treeBoxValue.value) {
-    treeView?.selectItem(treeBoxValue.value);
+    treeViewRef.value.instance.selectItem(treeBoxValue.value);
+  } else {
+    treeViewRef.value.instance.unselectAll();
   }
+
+  isTreeBoxOpened.value = false;
 }
 
-function treeViewItemSelectionChanged(e: DxTreeViewTypes.ItemSelectionChangedEvent) {
-  treeBoxValue.value = e.component.getSelectedNodeKeys();
+function treeViewItemSelectionChanged(
+  e: DxTreeViewTypes.ItemSelectionChangedEvent,
+) {
+  const selectedKeys = e.component.getSelectedNodeKeys();
+  treeBoxValue.value = selectedKeys.length > 0 ? selectedKeys[0] : null;
 }
 
 function gridBoxDisplayExpr(item: any) {
   return item && `${item.CompanyName} <${item.Phone}>`;
 }
 
-function onTreeItemClick() {
-  isTreeBoxOpened.value = false;
-}
-
 function onGridSelectionChanged() {
   isGridBoxOpened.value = false;
 }

apps/demos/Demos/DropDownBox/SingleSelection/jQuery/index.js

@@ -44,7 +44,8 @@ $(() => {
         selectNodesRecursive: false,
         onItemSelectionChanged(args) {
           const selectedKeys = args.component.getSelectedNodeKeys();
-          e.component.option('value', selectedKeys);
+          const singleValue = selectedKeys.length > 0 ? selectedKeys[0] : null;
+          e.component.option('value', singleValue);
         },
       });