Remove Double Left Border from the Grid
Environment
Product Version | 2018.3.911 |
Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I remove the double left border when hiding the first column in the Kendo UI Grid?
Solution
- Handle the
columnHide
andcolumnShow
events of the Grid. - In the event handler of
columnHide
andcolumnShow
, find the first visible column and apply a class that will remove its left border.
<style>
.k-filter-row>th.first-visible-column,
.k-grid tbody td.first-visible-column,
.k-grid tfoot td.first-visible-column,
.k-grid-header th.k-header.first-visible-column {
border-left-width: 0;
}
</style>
<div id="grid"></div>
<script>
function onColumnChange(e){
var columns = e.sender.columns;
var firstVisibleColumn = null;
var colIndex = null;
$(".first-visible-column").removeClass("first-visible-column");
for(var i = 0; i < columns.length; i++){
if(columns[i].hidden !== true) {
firstVisibleColumn = columns[i];
colIndex = i + 1;
break;
}
}
if(firstVisibleColumn){
e.sender.element.find("k-filter-row>th:nth-child("+colIndex+")").addClass("first-visible-column");
e.sender.element.find("tbody td:nth-child("+colIndex+")").addClass("first-visible-column");
e.sender.element.find("tfoot td:nth-child("+colIndex+")").addClass("first-visible-column");
e.sender.element.find(".k-grid-header th.k-header:nth-child("+colIndex+")").addClass("first-visible-column");
}
};
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: [
{ id: 1, name: "Jane Doe", age: 31, city: "Boston" },
{ id: 2, name: "John Doe", age: 55, city: "New York" }
],
columnMenu: true,
columnHide: onColumnChange,
columnShow: onColumnChange
});
});
</script>