2

I have a details list

  <DetailsList
          items={projects}
          columns={this.projectColumns}
          groups={projectGroups}
          selectionMode={SelectionMode.none}
          layoutMode={DetailsListLayoutMode.justified}
          compact={isCompactMode}
          onItemContextMenu={this.onItemContextMenu}
        />

With my context menu functions:

 private onItemContextMenu = (item: any, index: number, ev: MouseEvent): boolean => {
    ev.preventDefault();
    this.setState({
      isContextMenuVisible: true,
      contextMenuTarget: {
        left: ev.clientX,
        top: ev.clientY,
      },
      selectedItem: item,
    });
    return false;
  };
  
  private hideContextMenu = (): void => {
    this.setState({ isContextMenuVisible: false, contextMenuTarget: null });
  };
  
  private deleteItem = (item: any): void => {
 console.log(item);
  };

How do I prevent clicking on group headers so that the user cannot open a context menu on it?

Audrius Šaučiūnas
  • 89
  • 1
  • 5

1 Answers1

0

In your column definitions you can add columnActionsMode: ColumnActionsMode.disabled to make the column header non-interactive.

const columns = [
  {
    key: 'key',
    columnActionsMode: ColumnActionsMode.disabled
    ...
  },
  ... 
]
Spencer Wood
  • 610
  • 6
  • 15