[CLOSED] How to set css property of a grid column header at runtime

[feanor91]

Hello

My application could be use on several screen type including big screen in a workshop. On this screen I have to compute the dimension of the grid that show data to fulfill the screen so people could read information far from the screen.

i manage to draw data corectly and show ine good size from a laptop screen to my big scree, but now, I have to deal with the header column.

I use the custom grid show in you example. I have this CSS property :

.x-grid-custom .x-column-header {
    background : #718CA1 url(images/Grid/header_sprite.png) repeat scroll 0 bottom;
    font       : 12px/16px "segoe ui",arial,sans-serif;
    height     : 22px;
    border-left-color  : #6085A5;            
    border-right-color : #728BA1;
}

I could write another like that :

.x-grid-custom .x-column-header-large {
    background : #718CA1 url(images/Grid/header_sprite.png) repeat scroll 0 bottom;
    font       : 24px/26px "segoe ui",arial,sans-serif;
    height     : 22px;
    border-left-color  : #6085A5;            
    border-right-color : #728BA1;
}

But how to set up either in Javascript code or code behind code?

For the grid data I use a renderer but what for grid definition itself?

[feanor91]

Found.

I have duplicate all x-grid-custom CSS prpoerty, call them x-grid-custom-large, change parameteres wanted and use grid.Cls property in code behind.

[Daniil]

Hi @feanor91,

I think you found a correct way. This technique is demonstrated in this example.
https://examples2.ext.net/#/GridPane...ous/Custom_UI/