Edit this page

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

To remove the double left border after hiding the first column:

  1. Handle the columnHide and columnShow events of the Grid.
  2. In the event handler of these events, find the first visible column and apply a class that would 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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy