Completed
Last Updated: 18 Nov 2021 08:17 by ADMIN
Release 2.30.0
ben
Created on: 09 Nov 2021 19:02
Category: Grid
Type: Bug Report
0
Grid with GridCheckboxColumn and FilterMode=GridFilterMode.FilterMenu Adds Ellipses to Grid Header

Example Repo: https://github.com/benhysell/BlazorGridPagingIssue

Steps To Reproduce

  • Run application and navigate to https://localhost:5001/workAround
  • See the GridCheckboxColumn has ellipses added to the header
  • Stop application, change package reference for Telerik.UI.for.Blazor from version 2.28.0 to version 2.27.0
  • Clean/Rebuild/run application and navigate back to https://localhost:5001/workAround
  • Notice how the header does not have ellipses added for the GridCheckboxColumn
 
2 comments
ADMIN
Dimo
Posted on: 16 Nov 2021 13:56

Hi Ben,

Indeed, this is a issue on our side, thanks for reporting it. The Grid column headers now render a CSS class, which is related to filtering and increases the right cell padding. However, the checkbox header cell does not need this class.

You have three options for an immediate workaround, while we fix it:

  • increase the checkbox column width
  • decrease the right padding of the checkbox column header
    .k-grid-header th.k-filterable:first-child {
      padding-right: 12px;
    }
  • disable the overflow ellipsis in the checkbox column header
    .k-grid-header th.k-filterable:first-child {
      text-overflow: unset;
    }

Note that the CSS workarounds rely on the first column to be a checkbox column. If you use different Grids in different scenarios, you can use a custom CSS class to target the workaround to specific Grids only.

.MyGridClass .k-grid-header th.k-filterable:first-child {
  /* ... */
}

 

Regards,
Dimo
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/.

ben
Posted on: 15 Nov 2021 18:48
Same issue can be seen in 2.29.0 of Telerik.UI.for.Blazor as well.