Question

我们需要在特定的Kendo UI Grid（使用Razor引擎）中为两列实现这种类型的分层列显示

column example

“Amount Due”标题将位于两个子标题“US $”和“R $”之上，并显示正确的边框。否则，我们只需要使用两个单独的列标题来实现它。

行数据目前没有以任何方式对这两列进行分组......它们是截然不同的。

编辑添加：列必须保持独立，可过滤和可排序。

非常感谢，

Chad Lehman 企业IT，20世纪福克斯

Answer 1

我看到你在这上面标记了“razor”，所以我假设你正在使用网格的MVC版本。但是在Web版本中，您可以将HTML直接放入title属性中。然后，您可以根据需要设置该代码的样式。我相信你可以在MVC中做同样的事情：

columns.Bound(c => c.Name).Title("<b>Name</b>");

以下是Kendo Dojo中的Web版本示例：http://dojo.telerik.com/Imiq 您可以在style中看到我有一个head标记，并且我已在其中一列上更新了title属性。

代码：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

    <style>
    div.hdr1 {
        font-weight: bold;
      border-bottom: white 2px solid;
      text-align: center;
    }

    div.hdr2 {
        font-weight: normal;
      border-right: white 2px solid;
      width: 47%;
      float: left;
      height: 14px;
      text-align: center;
    }

    div.hdr3 {
      border: white 0px solid;
    }
  </style>
</head>
<body>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "ContactName",
                          title: "<div class='hdr1'>Contact</div><div class='hdr2'>First</div><div class='hdr2 hdr3'>Last</div>",
                            width: 200

                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
                });
            </script>
        </div>


</body>
</html>

Kendo UI Grid：分层列标题显示

1 个答案: