DataGrid demos - hide context menu in table in dropdown (#28758)

Co-authored-by: CORP\vladimir.bushmanov <vladimir.bushmanov@devexpress.com>

Author: Ambrozy

apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.html

@@ -79,6 +79,7 @@
           [focusedRowEnabled]="true"
           [focusedRowKey]="cellInfo.value"
           [hoverStateEnabled]="true"
+          (onContextMenuPreparing)="$event.items = []"
           (onSelectionChanged)="
             onSelectionChanged($event.selectedRowKeys, cellInfo, e.component)
           "

apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.ts

@@ -58,7 +58,7 @@ export class AppComponent {
       },
     });
   }
-  
+
   getSelectedRowKeys<T>(value: T): T[] {
     return value !== null && value !== undefined ? [value] : [];
   }

apps/demos/Demos/DataGrid/CustomEditors/React/EmployeeDropDownBoxComponent.tsx

@@ -12,7 +12,7 @@ const dropDownOptions = { width: 500 };
 const ownerLabel = { 'aria-label': 'Owner' };
 
 const EmployeeDropDownBoxComponent = (props) => {
-  const {data: { value: dataValue }} = props;
+  const { data: { value: dataValue } } = props;
   const initialSelectedRowKeys = dataValue !== null && dataValue !== undefined ? [dataValue] : [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialSelectedRowKeys);
   const [isDropDownOpened, setDropDownOpened] = useState(false);
@@ -24,6 +24,9 @@ const EmployeeDropDownBoxComponent = (props) => {
   }, []);
 
   const contentRender = useCallback(() => {
+    const onContextMenuPreparing = (event: DataGridTypes.ContextMenuPreparingEvent) => {
+      event.items = [];
+    };
     const onSelectionChanged = (args: DataGridTypes.SelectionChangedEvent) => {
       setSelectedRowKeys(args.selectedRowKeys);
       setDropDownOpened(false);
@@ -38,6 +41,7 @@ const EmployeeDropDownBoxComponent = (props) => {
         height={250}
         selectedRowKeys={selectedRowKeys}
         hoverStateEnabled={true}
+        onContextMenuPreparing={onContextMenuPreparing}
         onSelectionChanged={onSelectionChanged}
         focusedRowEnabled={true}
         defaultFocusedRowKey={selectedRowKeys[0]}

apps/demos/Demos/DataGrid/CustomEditors/ReactJs/EmployeeDropDownBoxComponent.js

@@ -19,6 +19,9 @@ const EmployeeDropDownBoxComponent = (props) => {
     }
   }, []);
   const contentRender = useCallback(() => {
+    const onContextMenuPreparing = (event) => {
+      event.items = [];
+    };
     const onSelectionChanged = (args) => {
       setSelectedRowKeys(args.selectedRowKeys);
       setDropDownOpened(false);
@@ -31,6 +34,7 @@ const EmployeeDropDownBoxComponent = (props) => {
         height={250}
         selectedRowKeys={selectedRowKeys}
         hoverStateEnabled={true}
+        onContextMenuPreparing={onContextMenuPreparing}
         onSelectionChanged={onSelectionChanged}
         focusedRowEnabled={true}
         defaultFocusedRowKey={selectedRowKeys[0]}

apps/demos/Demos/DataGrid/CustomEditors/Vue/EmployeeDropDownBoxComponent.vue

@@ -16,6 +16,7 @@
         :height="250"
         :selected-row-keys="getSelectedRowKeys(currentValue)"
         :hover-state-enabled="true"
+        :on-context-menu-preparing="onContextMenuPreparing"
         :on-selection-changed="onSelectionChanged"
         :focused-row-enabled="true"
         :focused-row-key="currentValue"
@@ -61,6 +62,9 @@ function getSelectedRowKeys<T>(value: T | null): T[] {
   return value !== null && value !== undefined ? [value] : [];
 }
 
+const onContextMenuPreparing = (e: DxDataGridTypes.ContextMenuPreparing) => {
+  e.items = [];
+};
 const onSelectionChanged = (e: DxDataGridTypes.SelectionChangedEvent) => {
   currentValue.value = e.selectedRowKeys[0];
 

apps/demos/Demos/DataGrid/CustomEditors/jQuery/index.js

@@ -120,6 +120,9 @@ $(() => {
           selectedRowKeys: selectedRowKeys,
           focusedRowEnabled: true,
           focusedRowKey: cellInfo.value,
+          onContextMenuPreparing: (e) => {
+            e.items = [];
+          },
           onSelectionChanged(selectionChangedArgs) {
             e.component.option('value', selectionChangedArgs.selectedRowKeys[0]);
             cellInfo.setValue(selectionChangedArgs.selectedRowKeys[0]);