如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列？

Question

我在 MVC 应用程序中使用 Kendo Ui Grid。我希望在我的网格中显示多个国家/地区的统计数据。我从数据库检索数据的方式，我的网格将显示类似于以下内容的数据：

Country    Area       Population    GDP      GDP Growth
India      3288000    1220200000    1.848    6.8
USA        9827000    314686189     15.09    1.7

但我希望它显示如下而不是上面的格式：

Country          India         USA            
Area             3288000       9827000        
Population       1220200000    314686189
GDP              1.848         15.09    
GDP Growth       6.8           1.7      

我怎样才能实现这种换位？

Answer 1

如果有人偶然发现这个问题，最重要的是你需要设置tdpropertydisplay: block和tr- display: inline-block。td它们会落在彼此的上面并且tr彼此相邻。

    #grid .k-grid-header { float: left; padding: 0 !important; }
    #grid .k-grid-content { width: 1000px; height: 300px !important}
    #grid table {width: auto; white-space: nowrap; }
    #grid tr { display: inline-block; }
    #grid thead tr { display: inline; }
    #grid th, #grid td { display: block; border: 1px solid black; height: 30px; padding:15px;}

和工作道场小提琴。