How to sync the height of locked table and scrollable table

[Yajing]

Hello,

The Context: We have a grid that has locked content. But the problem is the height of each row is too large, so I want to reduce it. Adding css to tr doesn't work because kendo will add height attribute to the dom after _adjustRowsHeight.

 

The solution I have is to adjust the height of the locked table and scollable table in dataBound function, but I want to sync the height of each row in the two tables after this. My question is: Is there a way to sync the height of locked table and the scrollable table without manually calling _adjustRowsHeight method?

 

Best regards,

Yajing

[Stefan]

Hello, Yajing,

I made an example demonstrating how to control the rows height only CSS, which will not be overwritten by the _adjustRowsHeight method. It involves the modifying the tr and the td elements. Please have in mind that the selectors may vary depending on the Grid id:

.k-grid td {
  font-size: 14px;
  white-space:nowrap;
  line-height: 13px;
}

#grid .k-grid tr td{
  height: 15px
}

http://dojo.telerik.com/oCerA

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Yajing]

Hello Stefan,

If you inspect the element, you will find the height of the row is 22.55 which is not controlled by the line-height or height of the <td>.

Best regards,

Yajing

[Stefan]

Hello, Yajing,

This is expected as there is padding styles in the cell and they are added to its height.

In general, this is the approach which will allow modifying the Grid cell height and ensuring they will be the same height.

Regards,
Stefan
Progress Telerik