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

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>
In this article