Remove Double Left Border from the Grid

Environment

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

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
Not finding the help you need? Improve this article