Approved
Last Updated: 27 Sep 2019 09:01 by ADMIN
AGB
Created on: 27 Sep 2019 08:41
Category: Grid
Type: Bug Report
1
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

Steps:

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
ADMIN
Attila Antal
Posted on: 27 Sep 2019 09:01

Workaround

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

Summary

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-filter-row>th:first-child, 
.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.