Unplanned
Last Updated: 12 Feb 2021 15:52 by ADMIN
Francesco
Created on: 10 Feb 2021 16:02
Category: Grid
Type: Bug Report
2
Grid height auto resize issue

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?

Attached Files:
1 comment
ADMIN
Doncho
Posted on: 12 Feb 2021 15:52

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>
JavaScript
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:

  1. Display all text on a single line.
  2. Display the beginning portion of the text on a single line + "...", then put the entire text to the Tooltip of the cell.
  3. Set some static height to all of the items:
    <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/.