I am using Kendo Ui Grid in my MVC application. I wish to display statistical data for multiple countries in my grid. The way I retrieve data from the database, my grid would show data a bit like the following:
Country Area Population GDP GDP Growth
India 3288000 1220200000 1.848 6.8
USA 9827000 314686189 15.09 1.7
But instead of the format above, I wish it show like the following:
Country India USA
Area 3288000 9827000
Population 1220200000 314686189
GDP 1.848 15.09
GDP Growth 6.8 1.7
How could I achieve this transposition?
If any one will stumble upon this issues, most important you need to set td property display: block, and tr - display: inline-block. td they will fall on top of each other and tr will be next to each other.
#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;}
And working dojo fiddle.
来源：https://stackoverflow.com/questions/32862133/how-to-transpose-rows-and-columns-in-a-kendo-ui-grid-in-mvc-application