剑道UI网格：分层列标题显示

我们需要实现这种类型的分层列显示的用于在特定剑道UI网格两列（用剃刀发动机）剑道UI网格：分层列标题显示

column example

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

行数据目前不以任何方式对两列进行分组......他们是不同的。

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

所有帮助非常感谢，

乍得雷曼企业IT，20世纪福克斯

来源

2014-09-03 Chad Lehman

我看你标记的“剃须刀”这一点，所以我假设你使用的是网格的MVC版本。但在网络版中，您可以将HTML直接放入title属性中。然后，您可以根据需要设置该代码的样式。我相当肯定，你可以做同样的事情在MVC：

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

这里是网页版的剑道道场的例子：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>

来源

2014-09-03 22:35:35 jwatts1980

谢谢你的。是的，我们正在为这个项目使用MVC/Razor。我看了一下你的dojo示例，而头部分看起来是正确的...需求是保持列是分开的，可过滤的，可排序的等。在这种情况下，没有'超级'头部的单独列是更可取的。 – 2014-09-04 00:13:14

剑道UI网格：分层列标题显示

回答

相关问题