Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 04 Mar 2025 09:23 by ADMIN
Release 2025 Q2 (May)
Philippe
Created on: 23 Aug 2024 21:10
Category: Grid
Type: Bug Report
3
Grid virtual columns width misalignment with headers when not enough columns shown to have horizontal scrollbar at creation

Steps to reproduce the problem:

Have a grid with:

  • specified width (e.g: 1000)
  • column virtualization
  • multiple columns with a width of 100, but most of them hidden in initial state (e.g.: 50 total, but only 8 shown)
  • columnMenu true
  • resizable true

When running the code that create the grid, the initial state looks like this:

Current behavior:

The header columns are filling the width of the grid (each bigger than the specified 100), but the rows columns cells have the specified width of 100, causing a misalignment.

However, changing the width of a column with the resize handle fixes all the widths (header + rows). 
Same thing for adding/removing a column from the menu.

See the attached video for an example.

If in the initial state there are more shown columns so they can fill the grid width (and have the horizontal scrollbar), the issue is not present.

Expected behavior:

Rows columns should always match the width of the header.

Dojo example:

Here's an example, based on the one from https://demos.telerik.com/kendo-ui/grid/column-virtualization 

https://dojo.telerik.com/@pgarand/UfEkIGiD

 

Attached Files:
1 comment
ADMIN
Georgi Denchev
Posted on: 30 Aug 2024 09:30

Hi, Philippe,

Thank you for the provided report.

I've logged an item in our public GitHub repository that you can track:

https://github.com/telerik/kendo-ui-core/issues/7957 

You can use several approaches as a workaround:

- Use the showColumn/hideColumn methods upon initialization to force the Grid to re-align.

- Use the following snippet in the dataBound event to call the internal alignment mechanism.

let initialRender = true;
           $("#grid").kendoGrid({
             dataBound: function() {
               if (initialRender) {
                 initialRender = false;
                 this._updateContentWidth();
               }
             },

- Init the Grid with more columns and hide them programmatically afterwards.

Best Regards,
Georgi Denchev
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Create an account Log In
View
Type
Status
Category