Good morning,
we have a strange issue using RadGrid with horizontal scroll and frozen columns: there a resizing of the height which gets user experience not the best.
See attached gif.
Could you please help us?
Hi Francesco,
Thank you for posting this request!
The described behavior appears because the heights of the rows are automatically adjusted depending on the content of the visible cells.
Currently, you can overcome this behavior by setting the height of the row elements explicitly so they do not change automatically:
<ClientSettings>
<Scrolling ... />
<ClientEvents OnGridCreated="gridCreated" />
</ClientSettings>
function gridCreated(sender, args) {
var grid = sender;
//get the header item and set its height
var HasStaticHeaders = grid.ClientSettings.Scrolling && grid.ClientSettings.Scrolling.UseStaticHeaders;
var headerRow = HasStaticHeaders ? grid.GridHeaderDiv.querySelector("thead > tr") : grid.get_masterTableView().HeaderRow;
headerRow.style.height = headerRow.offsetHeight + "px";
//loop through the data items and set height to each of them
var dataItems = grid.get_masterTableView().get_dataItems();
var currentItem;
for (var i = 0; i < dataItems.length; i++) {
currentItem = dataItems[i].get_element();
currentItem.style.height = currentItem.offsetHeight + "px";
}
}
Alternative options to avoid unwanted resizing are:
<ItemStyle Height="50px" />
<AlternatingItemStyle Height="50px" />
Kind regards,
Doncho
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.