Last Updated: 27 Sep 2019 09:01 by ADMIN
Created on: 27 Sep 2019 08:41
Category: Grid
Type: Bug Report
Grid double left-border when first column hidden

Hiding the first column in Grid will show a 2 pixels left border instead one.

Dojo Sample to replicate the issue: https://dojo.telerik.com/ubaLiYEN


1. Hide the first column (OrderID) from the Column Menu.

2. Notice the doubled left-border on the left hand side of the Grid.

1 comment
Attila Antal
Posted on: 27 Sep 2019 09:01


To work around the issue, you can implement a JavaScript logic that will be executed when a column is hiding or showing. In this event handler you can remove the left-border of the first visible cell.

Here is a Dojo Sample for demonstration: https://dojo.telerik.com/eRAnUyor/5


In order to improve performance, the Grid uses only CSS to apply styles to the cells instead of implementing a JavaScript logic to do the calculations.

.k-grid tbody td:first-child, 
.k-grid tfoot td:first-child, 
.k-grid-header th.k-header:first-child {
    border-left-width: 0;

Whether or not the cell is hidden, the td:first-child applies to the first cell in the row. As a side effect of this approach, the left border is not removed from the first visible cell, hence it gets doubled.

We have logged this issue in our system and can be publicly accessed at: Grid double left-border when first column hidden #5288

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.