New to Kendo UI for jQuery? Download free 30-day trial

Remove Double Left Border from the Grid


Product Version 2018.3.911
Product Progress® Kendo UI® Grid for jQuery


How can I remove the double left border when hiding the first column in the Kendo UI Grid?


  1. Handle the columnHide and columnShow events of the Grid.
  2. In the event handler of columnHide and columnShow, find the first visible column and apply a class that will remove its left border.
    .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;

<div id="grid"></div>

    function onColumnChange(e){
        var columns = e.sender.columns;
        var firstVisibleColumn = null;
        var colIndex = null;


        for(var i = 0; i < columns.length; i++){
            if(columns[i].hidden !== true) {
                firstVisibleColumn = columns[i];
                colIndex = i + 1;

            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() {
            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
In this article