TableView customizations

We would like to customise some general behaviours and look & feels for DG tableview like:

  • modify the content menu
  • disable core functionality like editing a cell

It would be also great being able to disable other core functionality like the general Drag & Drop support into a DG tableview.

Could you provide some details if this would be possible and how to do so?

The only possibility now is to hide the Ribbon component with css.
I think we can provide options to disable it and to disable drag-n-drop.

Ok thanks for the input. Removing the ribbon is a good way to start, however disable the elements seems to be a cleaner approach. Btw: do you see any chance to disable the drag n drop as this could break our view handling mechanism?

We need to discuss it internally.
And for elements – There is an ability to control them individually, but not from JS right now.
I will take a deeper look and try to introduce some method to control them from JS.

1 Like

Hi Andreas, what did you mean by the “content menu” - the context menu that appears when you click on any visualization (including grid), or top menu? I believe we have JS API exposed for handling both of them.

Sorry my bad! With context menu I am referring the menu which is open on table view cell right click.

Got it. One way to modify the viewer’s context menu would be to intercept the global “onContextMenu” event, as shown in this post: Mouse Event is Not Triggered

Here’s the working example that modifies grid’s menu:

grok.events
    .onContextMenu
    .subscribe((args) => {
        if (args.args.context instanceof DG.Viewer && JSON.parse(args.args.context.getOptions()).type == 'Grid') {
            grok.shell.info(args.args.context.table.name);
            args.args.menu.clear();
            args.args.menu.item('Yo!', () => grok.shell.info('Handled!'));
        }
    });

1 Like

To disallow cell editing, simply set grid’s “AllowEdit” property to false. You might also be interested in checking out other AllowXXX properties (see picture below).

Here’s how to do it programmatically:

let table = grok.data.demo.demog();
let view = grok.shell.addTableView(table);
view.grid.setOptions({allowEdit: false});

1 Like