Howto customize context menu for column hider / columnControlVisible

Support
#1

I would like to customize the default table context menu to control the visible columns of each table in the application, for reason of convenience I would like to add following items on the top:

select all
deselect all
—separator—
column1
column2
column3
…

Could you please show me how I can make this adjustment.

For illustration please see following part of the table documentation:

image

#2

hi Mike,

i’m not really sure if & how your requirement is achieveable without overriding certain parts of the Table implementation and stuff.

But would it not just be possible to use the normal context menu of the table?
See: Table - CUBA Platform. Developer’s Manual

Than it is as easy as creating a new <action /> into your table and it will automatically be shown in the context menu.

Here’s a running example:
https://demo.cuba-platform.com/sampler/open?screen=action-table

Just right click on any row and you’ll see the action “greeting”.

Just an idea…

Bye
Mario

#3

Hello Mario,

Thank you for taking the time to answer my question. Your first approach, the customization = overriding of the general table functionality I had in focus because I want all the table views in an app benefit from the change.

To evaluate an adjustment I try to identify the component that is currently responsible for currently implemented logic.

Alternatives like own context menus as described by you or by the documentation are not what I looking for.

I found the class com.haulmont.cuba.web.gui.components.WebAbstractTable which implements the table functionality.

#5

Hi,

Unfortunately, it is not that easy to customize this menu. Its implementation is located in VScrollTable class of the client-side of Vaadin Framework. Such a customization requires sub classing of many classes of the platform and Vaadin framework.

Moreover, this client-side part is not the public API of Vaadin and could be changed at any time.

#7

Hi Yuiry,

Thank you for your reply, as discussed with Aleksey in Berlin last week, there is currently only the “action” alternative. We also discussed the possibility for the Cuba team to make this change. In addition, Aleksey showed me another alternative, a context menu on the tab to edit the table columns. The tab variant we would prefer then, in which platform version can we find this functionality?

#8

Hi,

There is no generic option to add action to the window Tab, it can be done only if you extend the entire WindowManager, I do not recommend this.

I see two viable options:

  1. Add simple Table actions to the context menu of Table
  2. Use Table presentations mechanism

In the first case, you simple add the following code in your screens:

public class ClientBrowse extends AbstractLookup {
    private static final Set<String> importantColumns =
            Sets.newHashSet("title", "discount");

    @Inject
    private GroupTable<Client> clientsTable;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        clientsTable.addAction(new BaseAction("showAllColumns")
                .withCaption("Show all columns")
                .withHandler(event -> {
                    for (Table.Column c : clientsTable.getColumns()) {
                        c.setCollapsed(false);
                    }
                }));

        clientsTable.addAction(new BaseAction("showMinimalColumns")
                .withCaption("Show important columns")
                .withHandler(event -> {
                    for (Table.Column c : clientsTable.getColumns()) {
                        if (importantColumns.contains(String.valueOf(c.getId()))) {
                            c.setCollapsed(false);
                        } else {
                            c.setCollapsed(true);
                        }
                    }
                }));
    }
}

image

In the second case, you just enable presentations:

<groupTable id="clientsTable"
            presentations="true"
            width="100%">
    <columns>
        <column id="title"/>
        <column id="manager"/>
        <column id="city"/>
        <column id="discount"/>
        <column id="description"/>
    </columns>
    <rows datasource="clientsDs"/>
</groupTable>

Then, start the application and hide unnecessary columns. After that - open presentations menu and save the current view:
image

You can share this presentation to all users in presentation options.

I’m not sure that we will implement this Select all / Deselect all in the near future, just created the issue: https://youtrack.cuba-platform.com/issue/PL-10725

1 Like