Edit this page

Remove Double Left Border from the Grid


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


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


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.
    .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
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article