在kendo分组单元格之前隐藏缩进

时间:2015-09-06 15:44:35

标签: javascript css kendo-ui telerik kendo-grid

我试图在kendo网格中隐藏分组缩进以确保我的列有更多空间,但我无法获得正确的CSS。我尝试使用缩进类,隐藏一些空格,填充,但没有任何效果。 感谢

Example

1 个答案:

答案 0 :(得分:1)

请尝试使用以下代码段。

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

演示。

<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>

如果有任何疑虑,请告诉我。