Change the column header height of unidbgrid at runtime

[wsv01]

I know there are lots of different solutions to this topic of which I have tried some, however, I am not able to achieve even setting the column header (not the title height) at design time and have it reflect that height at run-time. I attached a screenshot of the TitleFont section at design time and when you change the font from 8 to 16, the grid reflects the change at design-time but the column header height is unchanged and the header text is cut off as shown in the 2nd attachment. Is there is a way to change the height on each uniDBgrid column header and/or the height for all uniDBGrids in an application? If so, you will need to supply some sort of example as to exactly where to place the code as I am not familiar with CSS or where to place other code in the ExtEvents or UniEvents properties. The ultimate goal would be to change the height at run-time. Thanks in advance. 

HeightInDesign.bmp ColumnHeaderResult.bmp

[Sherzod]

[Sherzod]

If I understood correctly, try this solution (not for multi-level columns).

1. CustomCSS ->

.x-column-header-text-wrapper {
    line-height: 100%;
}

2. MainForm.OnCreate ->

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniDBGrid1.JSInterface.JSAddListener(
    'reconfigure',
    'function(grid, store, columns){'+
        'Ext.defer(function() {'+
        '    var columns = grid.getColumnManager().getColumns();'+
        '    var maxHeight = 0;'+
        '    for (let i = 0; i < columns.length; i++) { '+
        '        if (parseInt(columns[i].titleEl.getStyle("font-size"))> maxHeight) {'+
        '            maxHeight = parseInt(columns[i].titleEl.getStyle("font-size"))'+
        '        }'+
        '    }'+
        '    if (maxHeight != 0) {'+
        '        grid.headerCt.setConfig({maxHeight: maxHeight + 10});'+
        '        grid.updateLayout();'+
        '    }'+
        '}, 10)'+
    '}'
  )
end;

 

[Sherzod]

Also at runtime.

1. CustomCSS ->

.x-column-header-text-wrapper {
    line-height: 100%;
}

2. Usage:

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  CalculatedHeight: SmallInt;
begin
  CalculatedHeight := 100; // You can calculate the max value yourself...
  with UniDBGrid1.JSInterface do
    JSCall('headerCt.setConfig', [JSObject(['maxHeight', CalculatedHeight, 'height', CalculatedHeight])]);
end;

[wsv01]

Thanks so much for the run-time solution. That works as expected, however, when I have a character such as "y", the bottom part of the "y" is cut off as shown in the attached image. Is there any way to get this resolved?

ColumnHeaderResult2.bmp

[Sherzod]

I will try to check. 

[Sherzod]

11 hours ago, wsv01 said:

when I have a character such as "y", the bottom part of the "y" is cut off as shown in the attached image. Is there any way to get this resolved?

line-height: 100%;

CustomCSS ->

.x-column-header-text-wrapper {
    line-height: normal;
}