Search code examples
javascriptcsskendo-uitelerikkendo-grid

Hide indent before kendo grouping cell

I am trying to hide grouping indent in kendo grid to insure more space for my columns but I cannot get the right css. I tried with indent classes, hiding some spaces, padding, but nothing worked. Thanks

Example

Solution

  • Please try with the below code snippet.

    <style>
    .k-group-cell {
        display: none;
    }
</style>

    Demo.

    <head>
    <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            dataSource: {
                data: [{ FirstName: "FirstName1", LastName: "LastName1" },
                      { FirstName: "FirstName1", LastName: "LastName2" },
                      { FirstName: "FirstName3", LastName: "LastName3" },
                      { FirstName: "FirstName1", LastName: "LastName4" }],
                group: { field: "FirstName" } // set grouping for the dataSource
            },
            groupable: false, // this will remove the group bar
            sortable: true,
            columns: [{
                field: "FirstName",
                width: 150
            }, {
                field: "LastName",
                width: 150
            }]
        });
    </script>
    <style>
        .k-group-cell {
            display: none;
        }
    </style>
</body>
</html>

    Let me know if any concern.