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

Co-authored-by: CORP\vladimir.bushmanov <[email protected]>

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/React/EmployeeDropDownBoxComponent.tsx

@@ -22,6 +22,9 @@ const EmployeeDropDownBoxComponent = (props) => {
   }, []);
 
   const contentRender = useCallback(() => {
+    const onContextMenuPreparing = (event: DataGridTypes.ContextMenuPreparingEvent) => {
+      event.items = [];
+    };
     const onSelectionChanged = (args: DataGridTypes.SelectionChangedEvent) => {
       setSelectedRowKeys(args.selectedRowKeys);
       setDropDownOpened(false);
@@ -36,6 +39,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

@@ -15,6 +15,9 @@ const EmployeeDropDownBoxComponent = (props) => {
     }
   }, []);
   const contentRender = useCallback(() => {
+    const onContextMenuPreparing = (event) => {
+      event.items = [];
+    };
     const onSelectionChanged = (args) => {
       setSelectedRowKeys(args.selectedRowKeys);
       setDropDownOpened(false);
@@ -27,6 +30,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="[currentValue]"
         :hover-state-enabled="true"
+        :on-context-menu-preparing="onContextMenuPreparing"
         :on-selection-changed="onSelectionChanged"
         :focused-row-enabled="true"
         :focused-row-key="currentValue"
@@ -57,6 +58,9 @@ const currentValue = ref(props.value);
 const dropDownBoxRef = ref<DxDropDownBox | null>(null);
 const dropDownOptions: DxDropDownBoxTypes.Properties['dropDownOptions'] = { width: 500 };
 
+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

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