Aviator Aviator - 1 year ago 145
Javascript Question

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.


Answer Source

Please try with the below code snippet.

    .k-group-cell {
        display: none;


    <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
    <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>
    <div id="grid"></div>
            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
        .k-group-cell {
            display: none;

Let me know if any concern.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download