Vaadin Grid -> DetailsPanel open and close but not for icon clicks

Hi,

Is it possible to have the detailspanel open and closed for all columns except columns which add a clickable icon via ComponentRenderer ?
Currently i made a hack where i converted ‘regular’ columns to contain buttons that look like default labels that open and close the detailspanel onClick but it is dirty as the detailsPanel does not open when clicking in between the buttons.

My Use Case (screenshot attached):

  • Open the details panel when clicking the green rectangle part
  • Do not open the details panel when clicking the red rectangle part

Screenshot : https://pasteboard.co/J5IdCSf.png

My hopes to have a default solution is very low but still wanted to give it a try.
Any creative geniuses around ?

Grts,
Jorn
18234903.png

Hi!

ItemClickEvent contains information of the column that was clicked, so maybe something like this solves your problem:

grid.setDetailsVisibleOnClick(false);
grid.addItemClickListener(e -> {
    if (e.getColumn() != theColumn) {
        grid.setDetailsVisible(e.getItem(),
                !grid.isDetailsVisible(e.getItem()));
    }
});

Hi Pekka,

I was still on Vaadin 4.0.13 which did not have the getColumn method on the ItemClickListener.
I try upgrading to 4.1.25 but i am fighting this error :

Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “vaadin-lumo-styles” has already been used with this registry
at eval (webpack-internal:///…/node_modules/@vaadin/vaadin-app-layout/node_modules/@vaadin/vaadin-lumo-styles/version.js?babel-target=es6:10:16)
at Module…/node_modules/@vaadin/vaadin-app-layout/node_modules/@vaadin/vaadin-lumo-styles/version.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-a1ca411179c2c73bf00d.cache.js:1131:1)
at webpack_require (http://localhost:8080/VAADIN/build/vaadin-bundle-a1ca411179c2c73bf00d.cache.js:20:30)
at eval (webpack-internal:///…/node_modules/@vaadin/vaadin-app-layout/node_modules/@vaadin/vaadin-lumo-styles/color.js?babel-target=es6:2:69)
at Module…/node_modules/@vaadin/vaadin-app-layout/node_modules/@vaadin/vaadin-lumo-styles/color.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-a1ca411179c2c73bf00d.cache.js:1059:1)
at webpack_require (http://localhost:8080/VAADIN/build/vaadin-bundle-a1ca411179c2c73bf00d.cache.js:20:30)
at eval (webpack-internal:///…/node_modules/@vaadin/vaadin-app-layout/theme/lumo/vaadin-app-layout-styles.js?babel-target=es6:2:93)
at Module…/node_modules/@vaadin/vaadin-app-layout/theme/lumo/vaadin-app-layout-styles.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-a1ca411179c2c73bf00d.cache.js:1191:1)
at webpack_require (http://localhost:8080/VAADIN/build/vaadin-bundle-a1ca411179c2c73bf00d.cache.js:20:30)
at eval (webpack-internal:///…/node_modules/@vaadin/vaadin-app-layout/theme/lumo/vaadin-app-layout.js?babel-target=es6:2:86)

Already removed and reinstalled all npm packages, did several cleans of the project but in the end always stumbling on this error.
Do you have any wise advise how to debug such error ? Googling did not help me much further.

That is why i avoid upgrading Vaadin 14 on my maven project as i always stumble on such errors (from npm) which makes me loose hours and hours just to use a new vaadin platform version.

Grts,
Jorn

Hi Pekka,

If i search on vaadin-grid via npm, i get the following listing :

npm search vaadin-grid
NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS
vaadin-grid | A free, flexible… | =jouni =manolo… | 2018-11-28 | 5.0.5 | vaadin elements components webcomponents web-components gwt grid datagrid datatable data-grid data-table
@vaadin/vaadin-grid | A free, flexible… | =alvarezguille… | 2020-04-03 | 5.5.3 | vaadin elements components webcomponents web-components grid datagrid datatable data-grid data-table
@vaadin/vaadin-grid-pro | vaadin-grid-pro | =alvarezguille… | 2020-03-19 | 2.0.7 | Vaadin vaadin-grid-pro web-components web-component polymer
@xpertsea/vaadin-grid | A free, flexible… | =joeybg… | 2018-12-05 | 6.0.0 | vaadin elements components webcomponents web-components grid datagrid datatable data-grid data-table
@anviltech/wuf-poly-grid- | Grid Style Guide… | =rodrigo.silve… | 2019-02-13 | 1.0.0 |
styles

Do you have any idea where the 5.0.5 version is defined ?

Grts,
Jorn

Did you also remove the generated package* and webpack* files, along with node_modules? If not, try this.

I realize that this is too much trouble, and you shouldn’t need to deal with these issues when upgrading Vaadin version. IIRC the team has worked on improving the situation.

Hi Pekka,

I already removed the package* and webpack* files, along with the node_modules several times.
After starting the project (spring-boot:run) i get the following missing packages :
Failed to find the following imports in the node_modules tree:

  - @vaadin/vaadin-accordion/src/vaadin-accordion.js
  - @vaadin/vaadin-details/src/vaadin-details.js
  - @vaadin/vaadin-grid/src/vaadin-grid-column.js
  - @vaadin/vaadin-grid/src/vaadin-grid-tree-toggle.js
  - @vaadin/vaadin-grid/src/vaadin-grid.js
  - @vaadin/vaadin-app-layout/src/vaadin-app-layout.js
  - @vaadin/vaadin-app-layout/src/vaadin-drawer-toggle.js
  - @vaadin/vaadin-grid/src/vaadin-grid-column-group.js
  - @vaadin/vaadin-radio-button/src/vaadin-radio-button.js
  - @vaadin/vaadin-grid/src/vaadin-grid-sorter.js
  - @vaadin/vaadin-radio-button/src/vaadin-radio-group.js
  - @vaadin/vaadin-dialog/src/vaadin-dialog.js

Which I imported manually via ‘npm install’.

In the end, i stumble on the same error which completely blocks me. Even going back to Vaadin 4.0.13 (my original version) is generating these errors so I am completely tearing all my hair out. Problem is that i understand the java part but not the npm part and how it is all linked (webpack).

Is there some support available that can follow on my screen because i have no idea what to do and how to solve it ?

The error :

Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “vaadin-grid-templatizer” has already been used with this registry
at eval (webpack-internal:///…/target/frontend/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-templatizer.js?babel-target=es6:170:16)
at Module…/target/frontend/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-templatizer.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-54ff82cc816694cac08a.cache.js:3891:1)
at webpack_require (http://localhost:8080/VAADIN/build/vaadin-bundle-54ff82cc816694cac08a.cache.js:20:30)
at eval (webpack-internal:///…/target/frontend/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-column.js?babel-target=es6:6:85)
at Module…/target/frontend/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-column.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-54ff82cc816694cac08a.cache.js:3699:1)
at webpack_require (http://localhost:8080/VAADIN/build/vaadin-bundle-54ff82cc816694cac08a.cache.js:20:30)
at eval (webpack-internal:///…/target/frontend/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-column-group.js?babel-target=es6:6:80)
at Module…/target/frontend/node_modules/@vaadin/vaadin-grid/src/vaadin-grid-column-group.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-54ff82cc816694cac08a.cache.js:3663:1)
at webpack_require (http://localhost:8080/VAADIN/build/vaadin-bundle-54ff82cc816694cac08a.cache.js:20:30)
at eval (webpack-internal:///…/target/frontend/node_modules/@vaadin/vaadin-grid/theme/lumo/vaadin-grid-column-group.js?babel-target=es6:2:90)

Grts,
Jorn

Hi Pekka,

In the meantime i got it to work on 14.1.23.
Suddenly my layout and font type has changed slightly but that i still need to figure out.

But i can confirm that your proposed solution for the initial problem is working.
In the meantime, I will pray for fast delivery of Vaadin 14.2 for better experience for Java developers because i almost don’t dare to touch Vaadin versions as it always gives problems on the frontend and its dependencies.
https://vaadin.com/blog/improving-the-developer-experience-for-java-developers

Many thanks for your help !
Grts,
Jorn

Great! Let’s indeed hope that 14.2 will fix the issues.