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

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.

<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>