Kendo网格的多列标题 [英] Multi-column Headers With Kendo Grid

问题描述

我不知道这叫什么，而且我对headerTemplate进行了很多修改，但无法弄清楚如何产生这种外观.我需要列名称的第二行才能在排序和过滤方面正常运行"，但是我尝试的所有操作都打破了这一点.我不知道headerTemplate是否是执行此操作的正确方法?这种分组有名称吗?我的研究几乎没有发现任何结果，因此我怀疑使用了错误的关键字.这种布局叫什么?

I don't know what this is called, and I've messed around a lot with the headerTemplate but can't figure out how to produce this look. I need the second row of column names to 'act normally' in terms of sorting and filtering, but everything I try breaks that. I have no idea if headerTemplate is even the right way to do this? Is there a name for this kind of grouping? My research is turning up a whole lot of nothing, so I suspect I'm using the wrong keywords. What is this layout called?

注意:出于安全原因，我无法发布代码转储(对图像也非常担心).如果需要特定的东西，请让我知道，我将尝试对其进行匿名化.但是，大多数情况下，我只是在寻找可以尝试的建议，而不是使用headerTemplate.

Note: for security reasons I can't post a code dump (super nervous about the image too). If a specific thing is needed, please let me know and I'll try to anonymize it. But, mostly I'm just looking for suggestions to try other than playing with the headerTemplate.

推荐答案

您将无法通过MVC上的Kendo网格实现多行Group标头，尽管有人在讨论如何在当前版本(2014Q2)中添加该功能剑道.请参阅下面的链接以获取更多参考:
枢轴网格StackOverflow参考

You won't be able to achieve multirow Group headers via Kendo grid on MVC, although there were discussion to add the feature in the current version(2014Q2) of Kendo. See below link for more reference:
Pivot Grid StackOverflow Reference

但是，您可以通过jquery在网格的数据绑定事件上实现multirow标头选项.但这是一种解决方法，而不是完美的解决方案.
请参阅js函数以获取数据绑定事件以添加多行标头:

However, you can achieve the multirow header option via jquery on databound event of the grid. But it is a workaround rather than a perfect soultion.
Please see the js function for databound event to add multirow header:

 function onDataBound(arg) {
     var myElem = document.getElementById('trParentHeader'); //Check if Parent Header Group exist
     if (myElem == null){ // if parent Header doesnot exist then add the Parent Header
        $("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'>  <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th>  <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
     }
  }

有关更多理解和工作示例，请参见下面的示例:

For more understanding and a working example please see below Sample:

多行列标题示例

如果您有任何疑问，请告诉我.

Please let me know if you if you have any queries.

这篇关于Kendo网格的多列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！