Change grid row setting dynamically

Flow
1

Hello,

I had changed font size of grid rows by charging css html template below.
1- How i do the same but dynamically by changing the classname of style? For example grid.getStyle().set(“compact”).
2- How can i affect only the desired grid? For the moment all my applications grid are affected.

Here’s my html



:host {
font-size: var(–lumo-font-size-xs)!important;
}


Thank you!

2

Hi Bruno

To add a class name to the html element of your specific grid, you can do

grid.getClassNames().add("compact");

This will result in this grid html: <vaadin-grid class="compact" ...>
You can then add CSS rules for vaadin-grid.compact {} in your shared styles.

Note: What you did with grid.getStyle().set("x", "y"); will add an inline style to the element, i.e. <vaadin-grid style="x:y;" ...>.

3

Thank you for your reply,

My problem is little bit different because i want change a value from shadow root.
I resolved my problem with this solution :

html
<dom-module id="compact-grid" theme-for="vaadin-grid">
    <template>
        <style>
            :host([theme~="compacted"]
)  {
                 font-size: var(--lumo-font-size-s);
            }
        </style>
    </template>
</dom-module>

Java
treeGrid.setThemeName("compacted");