Styling "vaadin-grid-tree-toggle"

Flow
1

Hello everyone,

I am trying to disable the toggle icons on my TreeGrid. It seems that I can not access this part of the shadow DOM from the “vaadin-grid” parent. Here is how my html file looks like:

<dom-module id="portal-grid" theme-for="vaadin-grid">
  <!-- https://github.com/vaadin/vaadin-grid/blob/master/src/vaadin-grid.html -->
  <template>
    <style>

      :host(.portal-menu) {
        height: 100%;
        width: 250px;
      }

      :host(.portal-menu) [part~="cell"]
 {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: center;
      }

    </style>
  </template>
</dom-module>

I can access the “vaadin-grid-cell-content” just fine. But trying the same with “vaadin-grid-tree-toggle” just does not work. Creating a new html file with theme-for=“vaadin-grid-tree-toggle” works, but it’s not my preferred solution, since I just want to disable the icon when the grid has the classname “portal-menu”.

Thanks in advance and kind regards,
Eric

2

Have you checked info on this page:

https://vaadin.com/components/vaadin-grid/html-api/elements/Vaadin.GridTreeToggleElement

According to it you should create theme module, theme-for=“vaadin-grid-tree-toggle”, as you have apparently tried and there use part name “toggle”. So it becomes something like

<dom-module id="portal-grid-toggle" theme-for="vaadin-grid-tree-toggle">
  <template>
    <style>

      :host(.portal-menu) [part="toggle"]
 {
          display: none;
      }
    </style>
  </template>
</dom-module>

Note, each dom-module needs to have unique id, otherwise new ones will override.

3

Hello Tatu,

thank you for the response. Unfortunately, this solution does not work, because there is no “vaadin-grid-tree-toggle” element with the class name “portal-menu”. I have defined this class name in the grid (grid.addClassName(“portal-menu”)). This option does not set the class name for it’s children web components.

I need either an option to set the class name of the “vaadin-grid-tree-toggle” element so that it fits the grid’s class name or access this component from within the “style” brackets of the “vaadin-grid” styling.

Do you have an idea how to accomplish this?

Thanks and regards,
Eric